Html 真正的中心垂直和水平 CSS Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14189625/
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
True Center Vertical and Horizontal CSS Div
提问by Jess McKenzie
How is it possible to create a true center CSS div cross browser for example to use within a holding page?
如何创建一个真正的中心 CSS div 跨浏览器，例如在一个保留页面中使用？
I have tried this 2007 css trick - How To Center an Object Exactly In The Centerbut as you can see from my JSFiddleof the code its not 100% center.
我已经尝试过这个 2007 css 技巧 - 如何将对象完全居中在中心，但正如您从我的JSFiddle代码中看到的，它不是 100% 居中。
HTML:
HTML：
<div class="center">
<p>Text</p>
</div>
CSS:
CSS：
.center{
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
border:5px solid black;
}
采纳答案by icktoofay
That technique requires the element to have a fixed width and height. You are not setting the width and height. Based on your border and margins, to center it, the width would need to be 190 pixels and the height would need to be 90 pixels. Using line-heightand text-alignin combination with a fixed width and height makes the text and border centered. Try it.
该技术要求元素具有固定的宽度和高度。您没有设置宽度和高度。根据您的边框和边距，要使其居中，宽度需要为 190 像素，高度需要为 90 像素。使用line-height和text-align结合固定的宽度和高度使文本和边框居中。尝试一下。
CSS
CSS
.center{
position: fixed;
top: 50%;
left: 50%;
width: 190px;
height: 90px;
line-height: 90px;
text-align: center;
margin-top: -50px;
margin-left: -100px;
border:5px solid black;
}
回答by Gixx Man
You can do it with pure CSS:
您可以使用纯 CSS 来实现：
html {
width: 100%;
height: 100%;
}
body {
min-width: 100%;
min-height: 100%;
}
div.centeredBlueBox {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 300px;
height: 200px;
background-color: blue;
}
It is important to give concrete (eg: 300px) and not derived (like: autoor 30%) values for widthand height.
重要的是要给予具体的（如：300px），而不是得到的（如：auto或30%）的数值width和height。
回答by derWilly
<div style='position:absolute; left:50%; top:50%; margin-left:(-)width_of_your_element/2px; margin-top:(-)height_of_your_element/2px'>
for example
例如
<!DOCTYPE html>
<html>
<body>
<div style='border:1px solid; width:200px; height:200px; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px'>hallo</div>
</body>
</html>
回答by AKonst
That's my solution:
这是我的解决方案：
<div style="position: absolute; left: 50%; height: 100%;">
<div style="position: relative; left: -50%; display: table; height: 100%;">
<div style="display: table-cell; vertical-align: middle;">
//your content here
</div>
</div>
</div>
It works in a lot of browsers. And there is no problem with content added after layout.
它适用于许多浏览器。而且布局后添加的内容也没有问题。
回答by Ron Jonk
This is an extra example with a height setter I created for IE vertical alignment. The extra span has a vertical-align:middle.
这是我为 IE 垂直对齐创建的高度设置器的额外示例。额外的跨度有一个垂直对齐：中间。
<style type="text/css">
html, body {
margin: 0;
padding: 0;
overflow:hidden;
text-align:center;
}
html, body{
height: 100%;
}
#loginContainer {
margin: 0 auto;
display: table;
min-width:300px;
text-align:left;
height: 85%; /* vertical align not exact in the middle */
}
#loginContainer .label{
width: 25%;
float:left;
white-space:nowrap;
line-height:20px;
}
#loginContainer h2{
border-bottom:2px solid #B4C3E1;
border-width:0 0 3px;
padding:2px 4px;
}
.mainHeader {
position:absolute;
top:0;
left:0;
text-align:center;
width:100%;
font-size:2em;
white-space:nowrap;
}
.detailsText {
border-top:1px solid #F60;
margin-top:5px;
clear:both;
}
/* layout horizontal and vertical */
.horizontalBox {
display: table-cell;
vertical-align: middle; /* not seen by IE6-7 */
height: 100%;
white-space: nowrap;
}
.verticalBox {
padding: 55px 0 0 0; /* 55px height of logo */
}
.rightText {
text-align:right;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
#loginContainer {
width:300px; /* minimum width */
}
.horizontalBox {
text-align: center;
}
.verticalBox, .heightSetter {
display: inline-block;
vertical-align: middle;
text-align: left;
zoom:1;
}
.heightSetter {
height: 100%;
}
.verticalBox {
display: inline;
height: 0;
}
.heightSetter {
width: 1px;
}
</style>
<![endif]-->
<div class="mainHeader">This is the Header content</div>
<div id="loginContainer">
<div class="horizontalBox">
<div class="verticalBox">
<h2>My header of the vertical box</h2>
<p>My Content</p>
</div>
<span class="heightSetter"></span>
</div>
</div>
回答by kpruner
Set the displaytype of the DIVto table-cell. Then you can use normal vertical-align, just like a TDelement.
将 的display类型设置DIV为table-cell。然后你可以使用 normal vertical-align，就像一个TD元素一样。
<div style="display: table-cell; vertical-align: middle; height: 200px;">
Centered Text
</div>
回答by Frankie Law
This is what I did
这就是我所做的
<html>
<head>
<title>Page Title</title>
<style>
.center { margin:auto; width:500px; background-color:green; }
</style>
</head>
<body>
<div class="center">
<p>Help me please</p>
</div>
</body>
</html>
Hope this helps.
希望这可以帮助。
