在浏览器窗口中将 div 绝对居中（H+V）的最干净的方法是什么？答案

【问题标题】：What is the cleanest way to center a div absolutely (H+V) inside a browser window?在浏览器窗口中将 div 绝对居中（H+V）的最干净的方法是什么？
【发布时间】：2010-08-28 04:43:21
【问题描述】：

我需要构建一个仅包含简陋内容（徽标和一些文本）的网页，以显示在浏览器窗口的中心。针对当今的网络浏览器，我如何才能最好地实现这种效果？

【问题讨论】：

我认为除非您使用 js，否则有一种方法可以将其垂直居中，因为否则您将永远不会真正知道视口的尺寸......但也许有一个带有负边距或定位的技巧我不知道的值。
我想这个问题已经在这里问过几次了..stackoverflow.com/search?q=center+a+div

标签： html css center

【解决方案1】：

这是一个非常简单的解决方案。我对此不以为然：

http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm

非常适合像您这样的简单body > div 情况。

您的另一个选择，虽然我担心这里的一些讨厌表的人会产生影响，但您可以将 div 包装在一个表格中，并使用其上的 vertical-align:middle 属性来处理垂直对齐，而无需使用 javascript。然后使用 margin: 0 auto;在 div 上处理水平中心。

【讨论】：

【解决方案2】：

如果您知道元素的尺寸（计算数值）：

position: absolute;
left: 50%;
top: 50%;
width: ($WIDTH)px;
height: ($HEIGHT)px;
margin: (-$HEIGHT/2)px 0 0 (-$WIDTH/2)px;

它的作用是将元素的左上角定位在视口的中心，然后使用负边距将中心点调整到视口的中心。

【讨论】：

【解决方案3】：

您可以将您的内容放在一个 div 中并为该 div 提供高度和宽度，然后应用这个简单的 css，例如您将宽度应用为 300px，高度应用为 300px::

div {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
}

那么它将始终位于中心并确保您使用了有效的 DOCTYPE。

【讨论】：