DIV居中（⽔平居中及垂直居中）实现代码效果:
代码:
<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;
div中的div居中
text-align:center;
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。