实现水平居中布局的方案

[GGXXMM]

1、行内元素/单文本 水平居中

给其父元素设置text-align: center

#parent {
    text-align: center;
}

• 优点：
  简单快捷，兼容性非常好。
• 缺点：
  1）只对行内内容有效；
  2）text-align属性会继承影响到后代行内内容；
  3）如果子元素的宽度大于父元素宽度则无效。

2、单个块级元素 水平居中

设置该元素margin: 0 auto即可。

• 优点：
  简单，兼容性好。
• 缺点：
  1）必须定宽，并且宽度不能为auto；
  2）宽度要小于父元素，否则无效。

3、多个块级元素 水平居中

将块级元素设置成行内或行内块级形式，其父元素设置text-align: center。

#parent{
    text-align: center;
}
.son{
    display: inline-block; /*改为行内或者行内块级形式，以达到text-align对其生效*/
}

• 优点：
  简单，兼容性非常好。
• 缺点：
  1）只对行内内容有效；
  2）text-align属性会继承影响到后代行内内容；
  3）块级元素改为inline-block，元素间换行、空格会产生元素间隔。

4、绝对定位+负margin-left 实现水平居中

#parent{
	position: relative;
	width: 300px;
	height: 200px;
	background: #42B983;
}
#son{
	position: absolute;
	left: 50%;
	margin-left: -75px;
	width: 150px;  /*定宽*/
	height: 200px;
}

• 优点：
  1）使用margin-left兼容性好；
  2）不管块级还是行内元素都可以实现。
• 缺点：
  1）实现代码较多；
  2）脱离正常文档流；
  3）使用margin-left需要知道该元素的宽度值。

5、绝对定位+transform 实现水平居中

#parent{
	position: relative;
	width: 300px;
	height: 200px;
	background: #42B983;
}
#son{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

• 优点：
  1）不管块级还是行内元素都可以实现。
• 缺点：
  1）实现代码较多；
  2）脱离正常文档流；
  3）使用transform兼容性不好（该属性支持ie9+）。

6、flex 实现水平居中

#parent{
	display: flex;
	justify-content: center;
}

• 优点：
  功能强大；简单方便；适用移动端（Android4.0+）。
• 缺点：
  PC端兼容性不好。