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