Html 将 div 水平和垂直居中，并在调整父级大小时保持居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17520145/
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 horizontally and vertically and keep centered when resizing the parent
提问by Aaron
I want to center a div horizontally and vertically at all times.
我想始终将 div 水平和垂直居中。
I can reduce/increase the width of the window and the div will respond by always remaining in the center of the window
我可以减少/增加窗口的宽度，div 将始终保持在窗口的中心作为响应
.cent
{
height:50px;
width:50px;
background-color:black;
margin:auto;
}
Here is a JSFiddle Exampleof what I have currently. But I want to keep the div centered vertically as well so if I reduce/increase the height of the window the the div will respond by staying in the middle of the window.
这是我目前拥有的JSFiddle 示例。但我想保持 div 垂直居中，所以如果我减少/增加窗口的高度，div 将通过停留在窗口中间来响应。
In regards to the example, I want to keep the blackbox vertically centered on window resize in the same way it always stays in the center horizontally.
关于这个例子，我想让黑盒垂直居中于窗口调整大小，就像它总是水平居中一样。
回答by Danield
You can do this with CSS tables:
你可以用CSS 表来做到这一点：
Markup
标记
<div class="container">
<div class="cent"></div>
</div>
(Relevant) CSS
（相关）CSS
html,body
{
height: 100%;
}
body
{
display: table;
margin: 0 auto;
}
.container
{
height: 100%;
display: table-cell;
vertical-align: middle;
}
.cent
{
height: 50px;
width: 50px;
background-color: black;
}
回答by Omar Shbaro
try this
尝试这个
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
回答by Swarnamayee Mallia
回答by Ritabrata Gautam
.cent
{
height:50px;
width:50px;
background-color:black;
position:absolute;
left:50%;
top:50%;
margin: 0 auto;
}
回答by Praveen
Usually margin: 0 auto;does the horizontal alignment and vertical-align: middlefor vertical alignment. I tried it but not working.
通常margin: 0 auto;做水平对齐和vertical-align: middle垂直对齐。我试过了，但没有用。
Try the below css
试试下面的 css
.cent {
height: 50px;
width: 50px;
background: #222;
position: absolute;
margin: -50px 0 0 -50px;
left: 50%;
top: 50%;
}
Check it in JSFiddle.
在JSFiddle 中检查它。
To know more about the trick check Dead Center an Element.
要了解有关此技巧的更多信息，请查看Dead Center an Element。
回答by Falguni Panchal
try this
尝试这个
.cent
{
height:50px;
width:50px;
background-color:black;
margin-left: -150px;
margin-top: -150px;
margin:auto;
position:absolute;
top:50%;
left:50%;
}
回答by Michael Unterthurner
Test this
测试这个
.cent {
width: 50px;
height: 50px;
background-color: black;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
overflow:auto;
}
here you have a example: http://jsbin.com/iquviq/30/edit
这里有一个例子：http: //jsbin.com/iquviq/30/edit
回答by ubaid ashraf
Check this
检查这个
.cent
{
height:50px;
width:50px;
background-color:black;
margin:auto;
margin-top:50%;
}
