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法)
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
總結
以上是生活随笔為你收集整理的html laber上下居中,CSS未知高度垂直居中的实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 高一计算机专业用平板电脑,高中生需不需要
- 下一篇： 为什么ElasticSearch应用开发