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

Question

我想始终将 div 水平和垂直居中。

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

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

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

关于这个例子，我想让黑框在窗口调整大小时保持垂直居中，就像它总是水平居中一样。

原文由 Aaron 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Danield 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

演示链接在 这里

    .cent
    {
        height:50px;
        width:50px;
        background-color:black;
        margin:auto;
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-25px;
        margin-top:-25px;
    }

原文由 Swarnamayee Mallia 发布，翻译遵循 CC BY-SA 4.0 许可协议