本文主要介绍了CSS未知高度垂直居中的实现，分享给大家，具体如下：
CSS垂直居中
.container{
width:500px;/*装饰*/
height:500px;
background:#B9D6FF;
border: 1px solid #CCC;
}
垂直居中(table)
好了，我们看其CSS实现。凡是table能做到的，CSS都能做的，但各浏览器在CSS的差异比较大，因此要兼容它们难度很大。这涉及许多细节，各种流啊，display的表现效果与CSS hack，IE早些年搞了大堆的私有属性，这也有待我们深一步挖掘。我们先看最简单的实现，背景图片法
背景图片法
CSS垂直居中
.container {
width:500px;
height:500px;
line-height:500px;
background:#B9D6FF url(/cnblogs_com/rubylouvre/205314/r_iebug.jpg) no-repeat center center;
border:1px solid #f00;
text-align: center;
}
垂直居中
CSS表达式法
司徒正美 CSS垂直居中
.container{
/*IE8与标准游览器垂直对齐*/
display: table-cell;
vertical-align:middle;
width:500px;/*装饰*/
height:500px;
background:#B9D6FF;
border: 1px solid #CCC;
}
.container img{
display:block;/*让其具备盒子模型*/
margin:0 auto;
text-align:center;
margin-top:expression((500 - this.height )/2);/*让IE567垂直对齐 */
}
垂直居中(CSS表达式)
绝对定位法
司徒正美 CSS垂直居中
div {
/*IE8与标准游览器垂直对齐*/
display:table-cell;
vertical-align:middle;
overflow:hidden;
position:relative;
text-align:center;
width:500px;/*装饰*/
height:500px;
border:1px solid #ccc;
background:#B9D6FF;
}
div p {
+position:absolute;
top:50%
}
img {
+position:relative;
top:-50%;
left:-50%;
}
垂直居中(绝对定位)
display:inline-block法
司徒正美 CSS垂直居中
div {
display:table-cell;
vertical-align:middle;
text-align:center;
width:500px;
height:500px;
background:#B9D6FF;
border: 1px solid #CCC;
}
垂直居中(inline-block法)
writing-mode法
CSS垂直居中
div{
width:500px;
height:500px;
line-height:500px;
text-align:center;
background:#B9D6FF;
border:1px solid #f00;
}
div span{
height:100%\9;
writing-mode:tb-rl\9;
}
div img{
vertical-align:middle
}
垂直居中(writing-mode法)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
