html div靠右垂直居中,在动态高度的Div内垂直居中HTML元素

5 个答案:

答案 0 :(得分：4)

使用适用于所有现代浏览器(IE 8 +)的display:table和display:table-cell：

.post {

width: 200px;

height: 200px;

background: rgba(0,0,0,0.8);

display:table;

}

.post h2 {

text-align: center;

width: 100%;

height: 100%;

display:table-cell;

vertical-align: middle;

}

.post h2 a {

color: #f7f7f7;

font-size: 2.2em;

font-weight: normal;

font-style: italic;

width: 100%;

}

答案 1 :(得分：2)

我想以不同的方式实现它，(只是为了好玩)，这个也是有效的：

jsFiddle

这个想法是使用高度为50％的:before块元素。

html, body{

height:100%;

}

.post {

width: 400px;

height: 300px;

background: rgba(0,0,0,0.8);

}

.post h2:before{

content:"";

display:block;

height:50%;

}

.post h2 {

text-align:center;

height:100%;

}

.post h2 a {

color: #f7f7f7;

font-size: 2.2em;

margin-top:-20px;

display: block;

}

希望它有所帮助： - )

答案 2 :(得分：1)

为链接提供比文本更大的行高，并在中间垂直对齐。然后绝对将div中的父元素定位在top: 50%并且上边缘减去链接线高的一半：

.post {

position: relative;

}

.post h2 {

text-align: center;

width: 100%;

position: absolute;

top: 50%;

margin-top: -150px;

}

.post h2 a {

vertical-align: middle;

line-height: 300px;

white-space: nowrap;

}

它甚至适用于IE7。

答案 3 :(得分：1)

[增订] 强>

你也可以这样做：jsFiddle

.post {

width: 400px;

height: 200px;

background: rgba(0,0,0,0.8);

position:relative;

}

.post h2 {

position:absolute;

top:50%;

width:100%;

text-align:center;

}

.post h2 a {

line-height:100%;

color: #f7f7f7;

font-size: 2.2em;

margin-top:-20px;

display: block;

}

答案 4 :(得分：0)

如果您不介意添加额外的HTML类，最简单的方法就是使用vertical-align：middle。

Hello!

CSS：

* { margin: 0; padding: 0; }

.post {

background: rgba(0,0,0,0.8);

width: 200px;

height: 200px; }

.post span {

height: 100%;

vertical-align: middle;

display: inline-block; }

.post h2 {

position: relative;

text-align: center;

width: 100%;

vertical-align: middle;

display: inline-block; }

.post h2 a {

color: #f7f7f7;

font-size: 2.2em;

font-weight: normal;

font-style: italic;

display: block; }