我想始终将 div 水平和垂直居中。
我可以减少/增加窗口的宽度,div 将通过始终保持在窗口的中心进行响应
.cent
{
height:50px;
width:50px;
background-color:black;
margin:auto;
}
这里有一个JSFiddle 示例 http://jsfiddle.net/tVuS6/我目前所拥有的。
但我也想保持 div 垂直居中,这样如果我减少/增加窗口的高度,div 就会通过停留在窗口的中间来做出响应。
对于该示例,我希望在窗口调整大小时保持黑盒垂直居中,就像它始终水平居中一样。
你可以这样做CSS 表格:
JsFiddle http://jsfiddle.net/danield770/tVuS6/14/
Markup
<div class="container">
<div class="cent"></div>
</div>
(相关)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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)