Html 垂直对齐两个 Div

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18872001/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 13:32:47  来源:igfitidea点击:

Vertically Align Two Divs

csshtml

提问by Parseltongue

New to everything web-programming wise.

一切网络编程的新手。

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

我试图垂直对齐两个包装器 div,以便它们位于页面中间,而不管浏览器如何。该网站可以在这里找到:www.armedwithreason.com/massshooting

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

我已经就这个问题查找了几十个教程,但没有任何东西可以工作。有任何想法吗?

采纳答案by zessx

You've set widthand heighton those two div, then you can use this kind of code :

您已经在这两个 div 上设置了widthheight,然后您可以使用这种代码:

.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;
}

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.

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

JsFiddle(a basic one with your own style)

JsFiddle(一个基本的有自己风格的)