1、多个元素水平居中
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
body{
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
.box{
width: 100%;
height: 100%;
background: #f0f0f0;
text-align: center;
}
.box span{
display: inline-block;
width:50px;
height: 50px;
line-height: 50px;
background: #9fc;
font-size: 16px;
}
2.多个元素垂直居中
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
body,p{
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
.box{
width: 500px;
height: 600px;
display: table-cell;
background: #f0f0f0;
vertical-align: middle;
}
.box p{
width:50px;
margin: 3px 0;
background: #9fc;
font-size: 16px;
}