绝对居中六法

01.负外边距(Negative Margins)

基本思路: 首先，将设置了绝对定位的子元素水平和垂直偏移50%；然后，在水平和垂直方向分别偏移负自身宽高的一半

  .parent{position:relative}
  .son{position: absolute;left: 50%;top: 50%}
  .cont{width: 100%;height: 150px;margin-left: -50%; margin-top: -75px}

优点：

• 兼容性好，IE6都能完美兼容，移动端更是不在画下.
• 代码量少.

不足：

• 子元素的宽高值需要确定，这对于高度自适应容器是个问题.
• 最好将盒子设置box-sizing:border-box，因为偏移值是依据content+padding值来确定.

---

02.负位移(Transforms/Translate)

基本思路: 首先，将设置了绝对定位的子元素水平和垂直偏移50%；然后，通过CSS3 transform属性值将子元素偏移负自身宽高的一半

  .parent{position:relative}
  .son{position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);}

优点：

• 支持子容器高度自适应；适用于响应式布局环境.
• 移动浏览器支持较好
• 代码量少.

不足：

• 不支持IE8及以下IE浏览器.
• 需要添加浏览器私有前缀.
• translate可能受transform其他子属性值影响.
• 要注意添加transform-style: preserve-3d优化渲染性能.

---

03.表格块(Table-Cell)

基本思路: 通过设置display:table/table-cell相关属性，模拟表格布局.

  .parent{display:table}
  .son{display:table-cell;vertical-align:middle}
  .cont{width:50%;height:50%;margin:auto}

优点：

• 支持高度自适应，可适用于响应式环境.
• 适用于多个子元素水平垂直居中环境.
• 兼容性良好，移动浏览器基本都兼容display:table/table-cell及相关属性.

不足：

• 需要额外标签.

---

04.行内块(Inline-Block)

基本思路: 首先，将子容器设置行内块和任一伪元素也设置为行内块及水平居中；然后对父容器设置文本居中即可

  .parent{text-align:center;overflow:auto}
  .parent:after{content:'';display:inline-block;vertical-align:middle;height:100%;width:0}
  .son{display:inline-block;vertical-align:middle}

优点：

• 支持子元素高度自适应.
• 适用于多个子元素水平垂直居中环境.
• 兼容性良好，IE7+支持.

不足：

• 当存在多个子容器时，注意盒子之间的间隙.

---

05.伸缩盒模型(Flexbox)

基本思路: 使用CSS3新添加的flexbox弹性盒模型相关属性，分分钟设置一个、多个子盒子的水平/垂直居中、对齐、等高

  .parent{display: flex; align-items: center; justify-content: center;}

优点：

• 不需要设置子元素的高度、宽度.
• 适用于任意子元素水平垂直居中环境.
• 提供更加开阔和便捷的布局思想；代码量少.

不足：

• IE10+才兼容，高级浏览器也部分存在兼容问题.
• 需要添加浏览器私有前缀.
• 可能存在性能问题(不确定).

---

06.绝对居中块(Absolute Centering)

基本思路: 结合设置子元素外边距auto及四个方向的偏移值为0达到水平垂直居中的目的

	  .parent{position:relative}
	  .son{width:50%;height:50%;margin:auto;position: absolute;top:0;right:0;left:0;bottom:0;}
	

优点：

• 支持IE8+，兼容性良好.
• 代码量少，标签结构简单.
• 宽高值通过设置为%，适用于响应式环境.

不足：

• 高度必须定义.

对于此种布局方式，此文 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术讲的很是透彻。

07.外插入一个空元素&利用浮动

#floater{background-color:#ccc;float:left; margin-bottom:-100px;height:50%;}
.content{clear:both;height:200px;position:relative;width:60%;margin:auto;}
	

优点：

• 适用于大多浏览器(包括IE8+)
• 没有足够的空间时(Eg:窗口缩小)Content不会被截断，滚动条出现

不足：

• 需要额外的空元素
• 用到了浮动(如果对于不好此属性者，也算不足)

08.line-height与height齐飞

---

.content{height: 10em;line-height:10em;}
	

优点：

• 适用于大多浏览器(包括IE8+)
• 无足够空间时不会被截断

不足：

• 只对文本有效(块级元素无效)
• 多行时,断词比较糟糕~如上效果，额