CSS：垂直和水平居中答案

【问题标题】：CSS: Vertical and horizontally centeredCSS：垂直和水平居中
【发布时间】：2016-06-05 03:47:53
【问题描述】：

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

【问题讨论】：

你不是说'谁的身高不固定'吗？
Stack Overflow 上有很多解决方案：stackoverflow.com/search?q=%5Bcss%5D+vertical+horizontal+center
position div center horizontal and vertical的可能重复
你需要纯css还是我们可以用一小行jquery？

标签： html css

【解决方案1】：

我不认为有一个“理想的”跨浏览器纯 CSS 解决方案来解决垂直居中问题，这不会比它的价值更麻烦。如果你想使用单行 jQuery...

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

CSS...

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

【讨论】：

@Midas 您对直接使用 Javascript 或 jQuery 的偏好与此解决方案的有效性无关。
我认为 jQuery 更无关紧要，因为它不是标准的。如果您不想使用纯 JS，也可以为此使用伪代码。

【解决方案2】：

横向使用

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

垂直使用

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

【讨论】：

【解决方案3】：

使用显示：表格。您可以在此链接 (Bredele vertical centering) 中找到一个示例。这是我使用的一个 sn-p：

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

奥利维尔

【讨论】：

【解决方案4】：

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

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

【讨论】：

-1 表示态度。 wdm 的解决方案与您的解决方案一样有效。关注问题，而不是回答问题的人。