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

DIV实现垂直居中（兼容IE6、IE7、IE8，Firefox）

2014-07-18 00:00 585 查看

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>多行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
font-size: 12px;
font-family: tahoma;
}

div#wrap {
display: table;
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 760px;
height: 400px;
*position: relative;
overflow: hidden;
}

div#subwrap {
vertical-align: middle;
display: table-cell;
*position: absolute;
*top: 50%;
}

div#content {
*position: relative;
*top: -50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
<div id="content">
<pre>
现在我们要使这段文字垂直居中显示！
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}</pre>
</div>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Firefox HTML

相关文章推荐

新的分享

章节导航