如何使一个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>

- user2830363

---

使用calc，top: calc(50% - 20px); http://jsfiddle.net/tewathia/SxxWV/18/ - tewathia

http://jsfiddle.net/SxxWV/20/ - Maulik patel

@tewathia Calc 不支持旧版浏览器。 - spiel

Answer 1

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

margin-top: -20px;

- spiel

Answer 2

我更喜欢使用CSS的after

这行CSS代码将正常工作

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

这里是演示工作。

- Dinesh Kanivu

Answer 3

你可以将盒子设置为 position: absolute，然后将上下边距设为0，接着设置margin为auto：

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

这里有一个例子：

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

- TheYaXxE

---

这是一个好答案。 - user2830363

Answer 4

你可以尝试这个：

在这里查看示例

.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; }

祝你好运

- Pradeep Pansari

---

谢谢你的帮助，伙计。 - user2830363