CSS未知高度垂直居中

CSS · 發表 2018-11-07 17:45:20

摘要： <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta content...

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title> CSS垂直居中</title>
<style type="text/css">
.container{
width:500px;/*裝飾*/
height:500px;
background:#B9D6FF;
border: 1px solid #CCC;
}

</style>
</head>
<body>
<h1>垂直居中（table）</h1>
<div class='container'>
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
</td>
</tr>
</table> 
</div>

</body>
</html>

好了，我們看其CSS實現。凡是table能做到的，CSS都能做的，但各瀏覽器在CSS的差異比較大，因此要相容它們難度很大。這涉及許多細節，各種流啊，display的表現效果與CSS hack，IE早些年搞了大堆的私有屬性，這也有待我們深一步挖掘。我們先看最簡單的實現，背景圖片法

背景圖片法

<!doctype html>
<html>
<head>
<title> CSS垂直居中</title>
<style type="text/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;
}
 
</style>
 
</head>
<body>
<h1>垂直居中</h1>
<div class="container">

</div>
</body>
</html>

CSS表示式法

<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>司徒正美 CSS垂直居中</title>
<style type="text/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垂直對齊 */
}
</style>
</head>
<body>
<h1>垂直居中（CSS表示式）</h1>
<div class="container">
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
</div>
</body>
</html>

絕對定位法

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>司徒正美 CSS垂直居中</title>
<style type="text/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%;
}

</style>
</head>
<body>
<h1>垂直居中(絕對定位)</h1>
<div class="container">
<p>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
</p>
</div>
</body>
</html>

display:inline-block法

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>司徒正美 CSS垂直居中</title>
<style type="text/css">
div {
display:table-cell;
vertical-align:middle;
text-align:center;
width:500px;
height:500px;
background:#B9D6FF;
border: 1px solid #CCC;
}
 
</style>
<!--[if IE]>
<style type="text/css">
i {
display:inline-block;
height:100%;
vertical-align:middle
}
img {
vertical-align:middle
}
</style>
<![endif]-->

</head>
<body>
<h1>垂直居中(inline-block法)</h1>
<div class="container">
<i></i>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
</div>
</body>
</html>

writing-mode法

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title> CSS垂直居中</title>
<style type="text/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
}
</style>
</head>
<body>
<h1>垂直居中(writing-mode法)</h1>
<div class="container">
<span>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
</span>
</div>
</body>
</html>

這裡推薦一下我的前端學習交流群：784783012，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。

點選： ofollow,noindex">加入