Question

挑战：你有一个空的身体标签。它唯一的孩子是一个div。 div的高度和宽度未知。使用CSS / HTML（无JavaScript）使div的内容垂直和水平居中。

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的高度和宽度未知。

奥利弗

Answer 4

这是对wdm的回复。用于垂直居中的纯JavaScript版本。

var el = document.getElementById('main');
el.style.marginTop = (document.body.offsetHeight - el.offsetHeight) / 2;

CSS：垂直和水平居中

4 个答案: