CSS未知高度垂直居中
摘要：
<!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">加入