Html 尝试在屏幕中水平和垂直居中 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8811427/
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
Trying to center div horizontally and vertically in screen
提问by Jassi
I'm trying to make a div for my landing page of my website center in the very center of the screen, but it is not working.
我正在尝试为位于屏幕正中央的网站中心的登录页面创建一个 div，但它不起作用。
Here is my code
这是我的代码
CSS:
CSS：
.centerDiv{
width:800px;
margin:0 auto;
border-radius: 5px;
background:#111;
padding:10px;}
HTML:
HTML：
<div id="centerDiv" class="centerDiv">
<h1>Title</h1>
<p>Text will go here.</p>
</div>
Thanks.
谢谢。
回答by Jassi
Note:If you're trying to center a div horizontally and vertically I would suggest looking into flexbox. You'll still need to provide fallback support, but flexbox is the future and it's amazing.
Update: flexbox is supported by all modern browsersnow.
注意：如果您尝试将 div 水平和垂直居中，我建议您查看flexbox。你仍然需要提供回退支持，但 flexbox 是未来，它很棒。
更新：现在所有现代浏览器都支持 flexbox 。
You need to give the div a static width and height first of all.
您首先需要给 div 一个静态的宽度和高度。
Second, you have to set position: absolute;and left: 50%; top: 50%;then you must do a margin-leftand margin-topthat are HALF of the height and width. It will then display correctly.
其次，你必须设置position: absolute;和left: 50%; top: 50%;那么你必须做一个margin-left和margin-top属于高度和宽度的一半。然后它会正确显示。
CSS:
CSS：
.centerDiv{
width: 800px;
border-radius: 5px;
background: #ccc;
padding: 10px;
height: 50px;
position: absolute;
margin-top: -25px;
margin-left: -400px;
top: 50%;
left: 50%;
}
P.S. I changed your styling a bit so you could actually read the text. Hope this helps!
PS 我稍微改变了你的样式，这样你就可以真正阅读文本了。希望这可以帮助！
回答by 0b10011
This code (demo) allows for any widthand heightto be set, without having to update any other properties (e.g. top= height / 2) or relying on techniques that aren't well-supported (e.g. display:table;. The one downside is support for older IE versions is lacking. Combining this with another solution for IE only is probably you're best bet.
此代码（演示）允许设置 anywidth和height，而无需更新任何其他属性（例如top= height / 2）或依赖不受支持的技术（例如display:table;。一个缺点是缺乏对旧 IE 版本的支持。将此与仅适用于 IE 的另一种解决方案相结合可能是您最好的选择。
The CSS:
CSS：
.absoluteCenter {
/* Must manually set width/height */
width:800px;
height:500px;
/* The magic centering code */
margin:auto;
position:absolute;
top:0;bottom:0; /* Aligns Vertically - Remove for Horizontal Only */
left:0;right:0; /* Aligns Horizontally - Remove for Vertical Only */
/* Prevent div from overflowing main window */
max-width:100%;
max-height:100%;
overflow:auto;
}
/* IE 7 and Below */
:first-child+html .absoluteCenter,
* html .absoluteCenter {
/* Place code here to override all above values, and add IE friendly centering */
}
And the HTML:
和 HTML：
<div class="absoluteCenter">
Content of DIV
</div>
回答by Vian Esterhuizen
What you're looking for is display:tableand display:table-cell. This option should vertically align the #center element in the #parent element regardless of the height of the #center element. I beleive you require a height on the #parent element though.
你要找的是display:table和display:table-cell。无论#center 元素的高度如何，此选项都应垂直对齐#parent 元素中的#center 元素。我相信你需要 #parent 元素的高度。
HTML
HTML
<div id="parent">
<div id="center">
<h1>Title</h1>
<p>Text will go here.</p>
</div>
</div>
CSS
CSS
#parent{
display: table;
width: /* Your width */;
height: /* Your height */;
}
#center{
position: relative;
display: table-cell;
width: /* Your width */;
height: /* Your height */;
vertical-align: middle;
margin: 0 auto;
}
I just used this yesterday, using display:tableon the body. This technique should be compatible through to IE8.
我昨天刚用过这个，display:table在body. 此技术应与 IE8 兼容。
回答by MarkSmits
Try the following:
请尝试以下操作：
.centerDiv{
position: absolute;
top: 50%;
height: 400px;
margin-top: -200px; /* Half of the height */
left: 50%;
width:800px;
margin-left: -400px; /* Half of the width */
border-radius: 5px;
background:#111;
padding:10px;
}
回答by Sven Bieder
set margin to auto instead of 0 auto and you need a height. I think 100% for your purpose.
将边距设置为 auto 而不是 0 auto 并且您需要一个高度。我认为 100% 是为了您的目的。
