如何使一个div垂直居中父div

2018-06-14 14:11:27

这个问题在这里已经有了答案：

如何垂直居中所有浏览器的div？ 41个答案

将div内的图像与响应高度10个答案垂直对齐

我会更喜欢在使用CSS after

这行CSS将正常工作

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

此处请参阅Demo Work

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

margin-top: -20px;

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

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

这是一个例子：

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

链接地址: http://www.djcxy.com/p/41501.html