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.
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.
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
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.