将 div 居中到网页的中间？答案

【问题标题】：Centering a div to the middle of the web page?将 div 居中到网页的中间？
【发布时间】：2011-06-23 07:08:00
【问题描述】：

我想让我的 div 位于网页的中间位置。我正在尝试制作一个预加载器 div，它应该位于网页的中间部分，并且在页面加载后，该 div 将被隐藏。我怎样才能做到这一点？

div 应该水平和垂直居中。

【问题讨论】：

【解决方案1】：

<div class = 'middle'></div>

.middle{
  margin: auto;
  width: 900px;
}

【讨论】：

正确答案。记得设置你的宽度，否则 div 会假设它的宽度是 100% 并且中心不会显示。
没错，你可以根据自己的喜好设置，这里900px只是一个例子。
这个也垂直居中吗？
nop，这是水平的，垂直对齐需要绝对定位。老实说，除非真的需要，否则我不会真正推荐它，但您可能想看看：jakpsatweb.cz/css/css-vertical-center-solution.html
我已经等了 12 年才看到这一点 CSS - 你无法想象我在过去为了让事情居中而不得不陷入困境。啧啧。

【解决方案2】：

将 div 居中 hor 和 ver 你可以这样做：

标记

<div class="centered"></div>

css

.centered{
    position:absolute;
    width:100px;
    height:100px;
    left:50%;
    top:50%;
    margin-left:-50px;
    margin-top:-50px;
}

【讨论】：