水平和垂直居中div,并在调整父级大小时保持居中

Question

我想在任何时候水平和垂直居中.

我可以减少/增加窗口的宽度,div将通过始终保持在窗口的中心来响应

.cent
{
  height:50px;
  width:50px;
  background-color:black;
  margin:auto;
}

这是我目前所拥有的JSFiddle示例.但我想保持div垂直居中,所以如果我减少/增加窗口的高度,div将通过停留在窗口中间来响应.

关于这个例子,我想让黑盒子在窗口调整大小时垂直居中,就像它总是水平放置在中心一样.

Answer 1

您可以使用CSS表格执行此操作:

的jsfiddle

标记

<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;      
}