Html 水平和垂直居中放置div，并在调整父对象大小时保持居中

我希望始终将div水平和垂直居中

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

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

这是我目前所拥有的一份报告。 但我希望保持div的中心垂直，所以如果我减少/增加窗口的高度，div将通过停留在窗口的中间来作出响应。 关于这个例子，我想让黑盒垂直居中于窗口大小，就像它水平居中一样。

测试这个

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

这里有一个例子：

检查这个

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

试试这个

position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;

试试这个

position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;

演示链接是

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

---

通常

margin:0自动

是否进行水平对齐和

垂直对齐：中间
用于垂直对齐。我试过了，但没用

试试下面的
css

.cent {
    height: 50px;
    width: 50px;
    background: #222;
    position: absolute;
    margin: -50px 0 0 -50px;
    left: 50%;
    top: 50%;
}

登记

要了解有关技巧检查的更多信息。
您可以使用CSS表执行此操作。：


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

加成
看看这个：）@Aaron你指的是哪种解决方案？div现在比窗口中心低25像素。当窗口调整大小时，它不会产生Aaron想要的效果。当您将高度设置为500px时，您可以很容易地看到它。当窗口垂直小于高度时，这将使div从页面顶部流出。
<div class="container">
    <div class="cent"></div>
</div>

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