18

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

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

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

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

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

4

8 回答 8

35

您可以使用CSS 表执行此操作：

提琴手

标记

<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;      
}
于 2013-07-08T07:34:19.573 回答
1

尝试这个

position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
于 2013-07-08T06:24:34.630 回答
1

演示链接在这里

.cent
{
    height:50px;
    width:50px;
    background-color:black;
    margin:auto;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-25px;
    margin-top:-25px;
}
于 2013-07-08T06:28:49.353 回答
0 
.cent
{
  height:50px;
  width:50px;
  background-color:black;
  position:absolute;
  left:50%;
  top:50%;
  margin: 0 auto;
}
于 2013-07-08T06:56:56.257 回答
0

通常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。

于 2013-07-08T06:57:05.213 回答
0

测试这个

.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

于 2013-07-08T06:23:03.323 回答
0

检查这个 

 .cent
   {
      height:50px;
      width:50px;
      background-color:black;
      margin:auto;
      margin-top:50%;
   }
于 2013-07-08T06:23:22.110 回答
0

尝试这个

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%;
    }
于 2013-07-08T06:26:45.473 回答