div内部元素居中要让div内部元素垂直居中，则给div加上此css样式：
.div-vertical-middle{
height:200px;
width:304px;
line-height:50px;
vertical-align:middle;
display:table-cell;
}
div中的div居中要让div内部元素⽔平居中，则给div加上此css样式：
.div-horizontal-middle{
height:200px;
width:304px;
line-height:50px;
text-align:center;
display:table;
}
下⾯是⼀段demo：
<html>
<head>
<title>居中测试</title>
<style>
*{
margin:0;
padding:0;
}
.div-vertical-middle{
height:200px;
width:304px;
line-height:50px;
vertical-align:middle;
display:table-cell;
}
.div-horizontal-middle{
height:200px;
width:304px;
line-height:50px;
text-align:center;
display:table;
}
.div-middle-out{
border:2px solid #000;
width:500px;
height:500px;
margin:50px auto;
display:table;
}
.div-middle-in{
text-align:center;
display:table-cell;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="div-vertical-middle" >
<h2>这是垂直居中</h2>
</div>
<div class="div-horizontal-middle" >
<h2>这是⽔平居中</h2>
</div>
<div class="div-middle-out" >
<div class="div-middle-in">
<h2>⽔平垂直居中</h2>
</div>
</div>
</body>
</html>

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