Question

我的意思是，如果我有一个div，高度为200px，宽度为200px，我想垂直对齐（我可以将它与＃34对齐;边距：自动＆＃34;，但是，有吗一种垂直对齐方式，而不知道屏幕的高度？

感谢和sory我的英语，它不是我的母语

编辑：屏幕高度

Answer 1

使用表格显示中心的东西非常方便...看看这个： http://jsfiddle.net/F9J4B/

请注意，这不是“使用表格布局”......只有三个div正在使用表格的显示规则。没有语义规则被破坏=）

HTML

<div class="table">
    <div class="tr">
        <div class="td">
            <p>Hello! I'm a DOM element. <br>I can be whatever size i want, and still still be in the center of things.</p>
        </div>
    </div>
</div>

CSS

body, 
html {
    height:100%
}
.table {
    width: 100%;
    height: 100%;
    display: table;
    background-color: #eee;
}
.tr {
    display: table-row;

}
.td {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Answer 2

以下是一个例子， FIDDLE

div {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
}

Answer 3

将一个方框放在另一个方框内：

div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

无论盒子大小如何。

对于内盒子，外盒可能需要position: relative;。定位工作。

Answer 4

当屏幕变得太小时，媒体查询会处理图像。

.vertcenterdiv {
     position: absolute; 
     background-image: url('http://upload.wikimedia.org/wikipedia/commons/2/27/Square_200x200.svg'); 
     background-position: center center; 
     background-repeat: no-repeat; 
     background-size: 100% auto;  
     height: 200px; 
     width: 200px; 
     top: 50%; 
     left: 50%; 
     margin-top: -100px; 
     margin-left: -100px;
}
@media (max-width: 200px) {
     .vertcenterdiv {
          position: absolute; 
          height: 100%; 
          width: 100%; 
          top: 0; 
          left: 0; 
          margin-top: 0; 
          margin-left: 0;
     }
}

如何在完全未知的宽度上垂直对齐div？

4 个答案: