水平和垂直居中 div 并在调整父级时保持居中 [重复]答案

【问题标题】：Center a div horizontally and vertically and keep centered when resizing the parent [duplicate]水平和垂直居中 div 并在调整父级时保持居中 [重复]
【发布时间】：2013-07-05 09:39:07
【问题描述】：

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

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

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

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

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

【问题讨论】：

看看这个:) tutorialzine.com/2010/03/…
@Aaron 您指的是哪种解决方案？

标签： html css

【解决方案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;      
}

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：

【解决方案3】：

演示链接是here

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

【讨论】：

【解决方案4】：

测试一下

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

这里有一个例子：http://jsbin.com/iquviq/30/edit

【讨论】：

当窗口垂直小于高度时，这将使div从页面顶部流出。

【解决方案5】：

检查一下

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

【讨论】：

div 现在比窗口中心低 25px。当窗口调整大小时，它不会产生 Aaron 想要的效果。将高度设置为 500px 即可轻松查看。

【解决方案6】：

试试这个

http://jsfiddle.net/tVuS6/4/

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

通常margin: 0 auto; 进行水平对齐，vertical-align: middle 进行垂直对齐。我试过但没有用。

试试下面的css

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

查看JSFiddle。

了解更多关于技巧检查的信息Dead Center an Element。

【讨论】：