您的位置：首页 > Web前端 > CSS

Web_CSS_DIV内部垂直居中显示

2013-08-23 23:37 211 查看
功能：在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>


 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Web CSS DIV
相关文章推荐
新的分享
章节导航