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

1、多个元素水平居中

  1
  2
  3

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.多个元素垂直居中

  
1
  
2
  
3

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