效果:
代码:
<html>
<head>
<style type="text/css">
/*页面通用样式*/
body {
background:#fff;
}
/*div 水平居中*/
.div1{
margin:0 auto;
text-align:center;
height:80px;
width:500px;
background:#e2e09c;
}
/*div 水平居中并且文本垂直居中*/
.div2{
margin:0 auto;
text-align:center;
height:80px;
width:500px;
background: #92e4ba;
line-height:80px;
}
.div3{
margin:0 auto;
text-align:center;
height:80px;
width:500px;
background: #ceacdc;
line-height:80px;
position:relative;
}
/*div div中div,水平居中且垂直居中*/
.div4{
margin:0 auto;
text-align:center;
height:60px;
width:400px;
background: #ad97e4;
vertical-align: middle;
line-height:60px;
position: absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-30px;
}
</style>
</head>
<body>
<br>
<div class="div1">div1：我要水平居中</div>
<br><br>
<div class="div2">div2：我要水平居中,文本要垂直居中</div>
<br><br>
<div class="div3"><div class="div4">div3：我是div中div,我要水平居中,也要垂直居中</div></div>
</body>
</html>
