功能:在div中垂直方向居中;
效果:
源码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>居中显示解决方案</title>
<style type="text/css">
#outer{
height: 100px;
overflow: hidden;
position: relative;
}
#outer[id] {
display: table;
position: static;
}
#middle { /*for explorer only*/
position: absolute;
top: 50%;
}
#middle[id] {
display: table-cell;
vertical-align: middle;
position: static;
}
#inner { /*for explorer only*/
position: relative;
top: -50%;
}
/* optional
#inner[id] {
position: static;
}
*/
.withBorder {
border: 1px green solid;
}
</style>
</head>
<body>
<div id="outer" class="withBorder">
<div id="middle">
<div id="inner">
我们追求的是垂直方向的居中!我们追求的是垂直方向的居中!我们追求的是垂直方向的居中!我们追求的是垂直方向的居中!
</div>
</div>
</div>
</body>
</html>