CSS:垂直居中和水平居中

Question

挑战:你有一个空的body标签。它唯一的子类是一个div。div的高度和宽度是未知的。仅使用CSS/HTML使div的内容垂直和水平居中(不使用JavaScript)。

对于测试沙箱，fork：http://jsfiddle.net/pB9hK/

Answer 1

我不认为有一个“理想的”跨浏览器纯CSS垂直居中解决方案，它的麻烦不会超过它的价值。如果您想使用一行jQuery...

$('#adiv').css('marginTop', ($(window).height() - $('#adiv').height()) / 2);

CSS...

#adiv {
    width: 60%;
    margin: 0px auto;
}

Answer 2

用于水平使用

body>div#center
{
text-align: center;
}

垂直使用

body>div#center
   {
   display: table-cell;
   vertical-align: middle;
   }

Answer 3

使用display:table。您可以在此链接(Bredele vertical centering)中找到一个示例。下面是我使用的一段代码：

html {
  display: table;
  table-layout: fixed;
  width: 100%; 
  height: 100%;
}

body {  
  display: table-cell;  
  width: 100%; 
  height: 100%;
  vertical-align: middle;
  margin:0;
}

#center {
  margin: auto;
}

正如您所问的，div#center的高度和宽度是未知的。

奥利维尔