Horisontal CSS Centering for Absolute Positioning
In my daily work, I needed to center a div horisontally. Usually this is easy. Not so when using absolute positioned elements.
Basically, absolute positioning allows you to type in coordinates for your div, coordinates from the top-left of the screen.
I found the following solution to work fairly well, and I’m posting it here in case someone else might gain from it, as well as a reminder to myself.
Give then Take
If you need to center your absolutely positioned #content div, wrap it in a new #content-container div and apply the following CSS.
#content-container { width: 500px; position: absolute; left: 50%; } #content { position: absolute; left: -250px; }
This will move the #content-container div’s left side to the exact center. After that, the #content div will be moved half the width of the #content-container div’s width to the left, thereby centering it.
It works reasonably well in both Mozilla and IE, as long as the browser is larger than the centered content.
Update: Doesn’t work as well as I initally thought. If scale the browser to be smaller than the the width of the #content-container, it’ll bork. Suggestions are welcome.
Update: AkaXakA’s method is better. Read it in the comments.
Feel free to post your solutions in the comments.
- The Wild West
- Horisontal CSS Centering for Absolute Positioning
- April '05 Installment: Pointless
- Copenhagen Cycling Culture
Well, the height wasn’t a problem, it was the width. I did figure it out, though. Instead of using divs, I used spans to encase the titles and that let me use the margin trick to center it. Not sure how portable this is or how well it’d work for other uses, but it was enough for me. Maybe wrapping the div inside a span would make it more useful? That is, if you can even do that in proper (x)html :p
Thanks all,
Aurule
AkaXakA said:
Well I have built a site using both tables and div’s. The reasons are historic. I have tried using the margin: 0 auto; method with absolutley no success. I even made a really simple page with a single div and a linked syle sheet and it still didn’t work. In explorer the div became glued to the right side of the window. The give and take method does seem to work well but you say that using the method quoted is better…..why?
All the best
Donethat
I should have mentioned that you need to specify a width for the contentbox.
There must be something else I’m doing wrong.
I love your give and take method, it works without effecting the content, haven’t found the downside yet though I’m sure there is one.
Donethat
The give and take method goes a bit wonky when the window is smaller than the size of the wrapper – and if you work with percentages or em’s for your width you tend to get rounding errors.
Haven’t had that problem yet.
When I have a little more time I shall play with the various methods.
Thanks for your contributions.
Donethat
Wow, reading the comments here solved a huge number of problems I was having with css layout. For example, valign is as simple as:
#container {
position: relative;
}
#bottom {
position: absolute;
bottom: 0px;
top: 0%;
}
similarly, using a container with position: relative/absolute and children with position: relative, the traditional struts & springs style of layout is possible, which I had not previously realized.
Micheal
Can you please show me how the HTML for this might work and have you tried it in IE yet?
Take care
Donethat
I run the following, that is tested on IE, Firefox and Opera:
body{
margin: 0px;
}
DIV#container{
position: absolute;
margin-right: auto;
margin-left: auto;
top: 0px; your content
Note however that this will cover any content on both sides of #content.
Example of this is http://www.evasunderklader.se. It’s the top bar that is formatted with the above.
Oops… the above was incomplete. Lets try again:
body{
margin: 0px;
}
DIV#container{
position: absolute;
margin-right: auto;
margin-left: auto;
top: 0px; whatever you want
left: 0px; VERY important
width: 100%; VERY important
}
DIV#content {
width: 881px; free of choice
margin-right: auto;
margin-left: auto;
text-align: center;
}
the HTML is:
your content
Note however that this will cover any content on both sides of #content.
OMG! I was having this alignment problem with absolute divs for days! This really helped me a lot!!!
Cheers to you!
I’m centering a transparent png logo on top of my header page using the absolute positioning. You have the right method, for the #content just replace the “px” with an elastic “em” and it will work both on IE and Firefox. It works absolutely fine on mine.
Thanks and more power!!
Thanks so much. Lina’s code did the trick for me to enable me to display some progress bars that appear while a simulation is crunching away, than using the code I could cover up those progress bars once the simulation was finished and results could be displayed as if a new page is being rendered.
What’s all the fuss about? Can’t you just put everything in a absolutely positioned , set it to 100% width then centre the div contents.
I’ve not tested that sample but I’m sure it’s worked for me before.
You are the man… worked perfectly… thanks
Thanks.. it worked perfectly for me! I used it on my webdesign portfolio, on the top..
Thanks for the idea. I have modified the code to be able to center a table and still use absolute positioning, (relative to the center of the table then…)
#contenant
{
width:500px;
position:absolute;
left:50%;
}
#la_table
{
position:absolute;
top:0px;
height:1200px;
left:-100%; See the minus here.
background-color:white;
}
h1.item
{
top: 200px;
left:-300px; See the minus here.
}
HTML looks like this:
<div id=contenant>
<TABLE id=la_table border=2> (tr td…)
<h1 class=item>(input type=xx, textarea, button etc.)</h1>
</table></div>
With this I am able to zoom in and out, print the page and have a background picture behind the table.
Still, it does NOT show the same result with IE8 versus FF 3.5. Elements are positionned the way I want in FF, but relative point will be left of the table in IE not the center and this, I don’t know why.