本文主要介紹了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法)

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的html laber上下居中,CSS未知高度垂直居中的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。