如何使div垂直居中于父div

Question

这是我在JSFIDDLE中的演示工作

NB不使用表属性

http://jsfiddle.net/SxxWV/12/

我想让课程.box应该垂直居中

CSS

.main{ height:300px; border:1px red solid;position:relative}
.box{width:40px; height:40px; background:red; }

/* for centering */
.box{ display: inline-block;position:relative; top:50% }
.main{ text-align: center; }

HTML

<div class="main">

 <div class="box"></div>   
</div>

Answer 1

您需要减去要居中的元素高度的一半,因此在这种情况下,请将以下内容添加到.box:

margin-top: -20px;