垂直对齐两个 div [重复]

【问题标题】：Vertically Align Two Divs [duplicate]垂直对齐两个 div [重复]
【发布时间】：2013-09-23 04:46:53
【问题描述】：

Web 编程方面的新知识。

我正在尝试垂直对齐两个包装器 div，以便它们位于页面中间，而与浏览器无关。该网站可以在这里找到：www.armedwithreason.com/massshooting

我已经查阅了几十个关于这个问题的教程，但没有任何工作可以解决。有什么想法吗？

【问题讨论】：

将两者放在一个 div 中，然后搜索“vertically align one div” :) 确实有很多很多东西，只需简单的搜索，等等......跨度>
看看here for a cross-browser example implementation 的垂直和水平居中元素。

标签： css html

【解决方案1】：

你已经在这两个div上设置了width和height，那么你可以使用这种代码：

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -170px;
    margin-left: -300px;
}
.wrapper2 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 150px;
    margin-left: -300px;
}

使用top: 50%; left: 50%，将 div 的左上角放在中间，然后使用 /positive/negative 边距调整其位置。

JsFiddle（基本款有自己的风格）

【讨论】：

经过测试，似乎水平对齐很好，但顶部比底部大。有什么想法吗？
是的，您只需根据需要调整margin-top: -170px 和margin-top: 150px。