Mikel
[转载]CSS未知高度垂直居中 – Ruby’s Louvre – 博客园.
最近群里这个问题比较热门，决定把我收藏的方法分享大家。在开始时，我们先看一下万能的table实现。
<!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"> |
</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"> |
</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> |
</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> |
</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> |
</span> |
</div> |
</body> |
</html> |
记得淘宝也搞一个font-size法，但我觉得上下差异比较大，就不收录了。怿飞的博客亦提到过一韩国人有个巧妙的实现，但日久链接失效了，谁收 藏了也请提供一下。
