垂直对齐两个分区 [英] Vertically Align Two Divs

问题描述

对网络编程明智的所有内容。

New to everything web-programming wise.

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

I'm trying to vertically align the two wrapper divs so that they are in the middle of the page, irrespective of the browser. The website can be found here: www.armedwithreason.com/massshooting

我已经在这个问题上查了几十个教程，并且无法正常工作。有什么想法？

I've looked up dozens of tutorials on this very question, and cannot get anything to work. Any ideas?

推荐答案

你设置了宽度和<$ c这两个div上的$ c> height ，那么你可以使用这种代码：

You've set width and height on those two div, then you can use this kind of code :

.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％;左：50％，你把div的左上角放在中间，然后你用/正/负边距调整它的位置。

With top: 50%; left: 50%, you put the div's top-left corner in the middle, then you ajust its position with /positive/negative margins.

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

JsFiddle (a basic one with your own style)

这篇关于垂直对齐两个分区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！