垂直/水平居中水平块元素

Question

My requirement is that that the dimensions of both the element and parent element are liquid and fluctuate. Thus, basically placing a block inside 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.

Answer 1

@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/