各种居中方法梳理

　1.移动端的flex大法：

 .parent{
2    display:flex;
3    flex-flow:row wrap;
4    justify:content:center;
5    //单行时
6    align-items:center;
7    //多行时：
8    align-content：center;
 }

相关兼容问题：https://www.zhihu.com/question/29924791

2.margin left/right设置为auto：

.child{
2 margin:0 auto;
}

浮动/绝对定位时无效，流式布局中用的比较多。

3.行内对齐：

.parent{
2   //在ie6、7中对块级也有效
3   text-alig:center;
}

4.单行文字居中对齐：

.child{
2   //让行高等于文字容器高度即可
3   line-height:container's height;
}

  多行文本时，用一个div把文本包裹，看作一个整体进行居中即可。

5.表格：

使用表格时，只要将td的align：center，valign:middle 即可。如果要在css中写居中样式：vertical-align:middle;text-align:center;

注意：IE8以上的浏览器text-align:center;只对行内元素起作用。

6.模拟表格布局：

.parent{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  height:400px;
  width:400px;
}
.child{
  height:200px;
  width:200px;
  background-color:black;
  display:inline-block;
}

此法只对ie8以上有效。

7.纯绝对定位居中：

用绝对定位top、left设置50%，用元素高/宽的一半补偿。

.parent{
position:relative;
  height:400px;
  width:400px;
}
.child{
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-100px;
  margin-top:-100px;
  height:200px;
  width:200px;
  background-color:black;
}

在已知元素高/宽的时候使用。

8.另一种绝对定位（IE9+）

.parent{
  position:relative;
  height:400px;
  width:400px;
}
.child{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  height:200px;
  width:200px;
  background-color:black;
}

如果不设置高宽的话，元素会填充整个容器。

9.浮动+相对定位 实现水平居中：

将浮动元素相对定位到父元素宽度的50%，浮动元素的子元素再相对之定位-50%补偿一半宽度，实现居中。不必知道元素的宽度。

.parent{
  height:400px;
  400px;
}
.wrapper{
  float:left;
  position:relative;
  left:50%;
  border:1px solid black;
  clear:both;
}
.pat{
  position:relative;
  left:-50%;
  100px;
  height:100px;
  background-color: red;
}

10.绝对定位+transform

.parent{
  height:400px;
  width:400px;
  position:relative;
}
.child{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background-color:black;
  width:100px;
  height:100px;
}

这是我移动端上比较常用的一种.