Question

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

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

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

这是我目前所拥有的JSFiddle Example。但我想保持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;      
}

Answer 2

试试这个

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

Answer 3

演示链接 here

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

Answer 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

Answer 5

检查

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

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

Answer 7

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

Answer 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。

Answer 9

你需要绝对定位你的div，这会将div相对于你的窗口，而不是相对于你的布局。然后，top:50%;和left:50%;，将它置于中心位置，并在更改窗口大小时保持这种状态。

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

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

9 个答案:

标记

（相关）CSS