css布局系列 -- （一）多个元素垂直居中和水平居中

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;
}