Vertically / Horizontally Center Block Level Elements
My requirement is that that the dimensions of both the element and parent element are liquid and fluctuate. Thus, basically placing a block ins开发者_JAVA百科ide a block, where their respective dimensions are completely unknown.
I have been using JavaScript to calculate them at run time, considering only JavaScript can look in the DOM at run time and calculate this.
@Shane,
CSS3 introduced the Flexible box model, maybe you can use it depending the audience of your website...
So to Vertically & Horizontally center block Level elements in the body element, you'd just have to write this CSS declaration:
body {
display: box;
box-orient: horizontal;
/* horizontally centered */
box-pack: center;
/* vertically centered */
box-align: center;
width: 100%;
height : 100%;
}
http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
精彩评论