在水平和垂直方向上将div居中，并在调整父级大小时保持居中

小编典典

在水平和垂直方向上将div居中，并在调整父级大小时保持居中

css

我想始终在水平和垂直方向上将div居中。

我可以减小/增加窗口的宽度，并且div会始终保持在窗口的中心，从而做出响应

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

这是我目前拥有的。但是我也想使div垂直居中，因此，如果我减小/增加窗口的高度，div会通过停留在窗口中间来做出响应。

关于该示例，我想使黑盒在窗口调整大小上保持垂直居中，就像它始终保持在水平居中位置一样。

阅读 354

2020-05-16

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

2020-05-16