Menu
We have a login page that is designed to have a 200px-high DIV vertically centered in the middle of the page. That is, it creates a 200 pixel blue band left edge to right edge (with form elements in it) that ideally should remain vertically centered in the viewport no matter how the browser window is resized.
This must be a CSS solution.
So let's say here's some sample markup:
<body>
<div id="mainDiv">
<div id="centerDiv" style="height:200px;background-color:blue;color:white">
Center this baby vertically in the #mainDiv, please!
</div>
</div>
</body>
Assume that my CSS dictates that the #mainDiv is stretched to cover the viewport top and bottom, which is easy enough to do. Are there CSS rules that I can apply to any of the elements or the page that will reliably and cross-browser (incl. IE6) vertically center #centerDiv? In a perfect world we should just be able to say
#centerDiv {
margin: auto 0;
}
And even in an OK world we should be able to address this issue with a few styles. But to quote Ving Rhames' character from Pulp Fiction, We're pretty %&#!ing far from OK.
I've looked at the solutions offered in Related Questions and scoured the Web. Nothing I can find really works 100%. Maybe this is unsolvable, but I thought I'd give the collective brains here the problem and see if I can get lucky. Thanks in advance.
841
For this to work, you need to have a parent container with the display: table; property, and inside that container you will have the number of columns you want to have centered, with the display: table-cell; (and vertical-align: middle; ) property.
To center a div vertically on a page, you can use the CSS position property, top property, and transform property. Start by setting the position of the div to absolute so that it's taken out of the normal document flow. Then set the top property to 50%.
If you have a fixed height, you can do it. Give the child div a top of 50% and a margin-top of -100px (or vice-versa) and you should be set.
85
if height unknown:
http://jsfiddle.net/Limitlessisa/a7xw6b2c/
.centerdiv{
background:red;
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
29
For true automatic positioning in the center, the inner DIV would need to know the boundaries of the containing DIV. If your container does not have hard boundaries, there is no way for the inner DIV to calculate its own position automatically. It simply has no frame of reference.
The closest I think you can make it with a simple CSS solution is this:
#mainDiv
{
border: 1px dashed #000000;
}
#centerDiv
{
margin: 33% auto;
height: 200px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
