使用 css 在页面中间居中一个 div 框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2498003/
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
center a div box in the middle of the page using css
提问by X10nD
I want to center a div right in the middle of the page, I tried top:30%, but when the window is resized off the alignment.
我想在页面中间居中一个 div，我试过top:30%，但是当窗口调整大小时不对齐。
<div id=cent></div>
Thanks Jean
谢谢让
回答by naivists
If you know the height/width of that div (for instance, it will be 100px X 200px) then you can do it like this:
如果您知道该 div 的高度/宽度（例如，它将是 100px X 200px），那么您可以这样做：
#cent {
position:absolute;
top:50%;
left:50%;
margin-top:-50px; /* this is half the height of your div*/
margin-left:-100px; /*this is half of width of your div*/
}
UPDATE: another option: see http://www.w3.org/Style/Examples/007/center(Centering vertically)
更新：另一种选择：参见http://www.w3.org/Style/Examples/007/center（垂直居中）
回答by Dumitru Daniel
HTML:
HTML：
<div id="box"></div>
CSS:
CSS：
#box{
background-color: green;
width:100px;
height:100px;
margin:auto; /*This will center it horizontally but not vertically*/
}
Watch out of the quotes or double quotes around the id "box", you need them.
注意 id "box" 周围的引号或双引号，你需要它们。
回答by syockit
Adding notes to naivists' link (to w3c tips site):
display:table-celldoes not work with height:100%. So, if you want to vertically center an element, which you don't know its height, on a page, you need to put it inside a container with display:tableand height:100%, and another container with display:table-celland vertical-align:middle.
将注释添加到 naivists 的链接（到 w3c 提示站点）：
display:table-cell不适用于height:100%. 所以，如果你想在页面上垂直居中一个你不知道它的高度的元素，你需要把它放在一个带有display:tableand的容器中height:100%，以及另一个带有display:table-celland 的容器中vertical-align:middle。
Furthermore, if you want to center it horizontally, you need to specify width:100%to body, the outer container, and give text-align:centerto inner container. The content should have display:inline-block, and to reset alignment, text-align:left.
此外，如果要水平居中，则需要指定width:100%to body，外容器，并指定text-align:center给内容器。内容应该有display:inline-block，并且要重置对齐方式，text-align:left。
Ultimately, it becomes as follows:
最终会变成这样：
<style>
#vcontainer {
display: table;
height: 100%;
width: 100%;
}
#hcontainer {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#content {
display: inline-block;
border: lightGray 1px solid;
background-color: lightBlue;
text-align: left;
}
</style>
<body>
<div id="vcontainer"><div id="hcontainer">
<div id="content">
Hoyjo!<br>
I have returned to my hometown!<br>
Lolololo lololo lololo lololo lololo!<br>
</div>
</div></div>
</body>
I cannot guarantee it will work on legacy browsers (IE6/7). It will work on IE8 provided it runs on IE8 standards (yes, this will screw your mind. Thanks, MS!), and you must give <html>and <body>the height:100%.
我不能保证它可以在旧版浏览器 (IE6/7) 上运行。它将工作在IE8提供它运行在IE8的标准（是的，这会搞砸你的心。谢谢你，MS！），你必须给<html>和<body>的height:100%。
回答by edoriggio
I know this question is 9 years old, but having stumbled upon it 9 years later, maybe someone else could do the same.
我知道这个问题已经有 9 年的历史了，但是在 9 年后偶然发现它时，也许其他人也可以这样做。
This is my working solution:
这是我的工作解决方案：
#cent {
position: absolute;
width: 500px;
height: 500px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
By doing this it will set the widthand heightto 500px, then it will set the top, left, rightand bottomconstraints to 0, and finally, by setting the margins to auto, the box will be put in the exact middle of the window. This will also be responsive.
通过这样做，它会设置width和height至500像素，那么它将设置top，left，right并bottom约束至0，最后，由边缘设置auto，箱子将被放置在窗口正中间。这也将是响应式的。
回答by Matthy Playz
If you want the top middle:
HTML:
如果你想要顶部中间：
HTML：
<div class="cent">
<!-- code -->
</div>
CSS:
CSS：
.cent {
align: center;
}
and if you want direct middle, use the same HTML but change the CSS to:
如果您想要直接中间，请使用相同的 HTML，但将 CSS 更改为：
.cent {
align: center;
position: absolute;
top: 40%;
left: 45%;
}
Example Code: jsfiddle.net/Lzdvnk29(it may not look centered if you
look at it, but if it is a full HTML page it will show in the direct middle)
示例代码：jsfiddle.net/Lzdvnk29（如果你
看它可能看起来不居中，但如果它是一个完整的HTML页面，它会直接显示在中间）
回答by SpikETidE
<div id="content"
style="text-align: center;
vertical-align: middle;
border-color: #000000;
border-width: 1px;
border-style: solid;
margin-top: 25%;
margin-bottom: 25%;">
hi
</div>
This worked for me...
这对我有用...
Edit : This will align the whole div... regardless of the size of the div or the page... Assuming that this id the only div in the whole page...
编辑：这将对齐整个 div...无论 div 或页面的大小如何...假设这个 id 是整个页面中唯一的 div...
回答by Sergio Tapia
Here's how:
就是这样：
#cent
{
margin-left:50px;
margin-right:50px;
}
Now your div is going to be 50px from left and right and centered in whatever container you have it in.
现在，您的 div 将从左到右各 50 像素，并在您拥有它的任何容器中居中。
回答by Hobby99
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
