html laber上下居中,CSS未知高度垂直居中的实现

本文主要介绍了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(http://images.cnblogs.com/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法)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。