Question

这是我在JSFIDDLE中的演示工作

NB不使用表格属性

我想让课程.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;

Answer 2

我会更喜欢使用CSS after

这一行CSS可以正常使用

.main:after{ content: ""; display: inline-block; 
height: 100%; vertical-align: middle; }

这里标有 Demo Work

Answer 3

您可以将框设置为position: absolute，然后将顶部和底部设置为0，然后将边距设置为自动：

.box {
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto;
}

以下是一个例子：

http://jsfiddle.net/SxxWV/23/

Answer 4

你可以试试这个：

Fiddle here

.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%; margin-top:-20px; }
.main{ text-align: center; }

祝你好运

如何使div垂直居中于父div

4 个答案: