居中布局

1、水平居中（宽度未知）

例：有两个div，大的div包裹着小的div，如何使小的div水平居中在大的div中？

html结构实例

---

解决方案：(1)inline-block + text-align

初始DEMO是块级元素，会充满父元素；inline-block默认宽度为内容宽度

css样式

优点：兼容性较好，甚至可以兼容IE6

缺点：子元素会继承父元素的text-align，使子元素里的内容也水平居中

---

解决方案(2)：table  +  margin

table在表现上非常相似block，但table元素的宽度跟着内容走，是内容宽度

css样式

  优点：只需在子元素child上设置css样式，不用关心父元素的

  缺点：兼容性较差，如果需要兼容，更改html样式，改为table样式

---

解决方案(3)：absolute  +  transform

这是用绝对定位和偏移解决方案

css样式

left:50%; 将子元素距离左边50%，translateX是将自身宽度往左偏移50%；结果是水平居中

  优点：因为position：absolute;脱离文档流，所以不会影响其他的子元素；

  缺点：transform是css3的内容，所以兼容性较差；

---

解决方案(4)：flex  +  justify-content

css样式

css样式同上

  优点：只需设置父元素，不用设置子元素

  缺点：flex也是css3的，兼容性较差

---

2、垂直居中(高度未知)

例：有两个div，大的div包裹着小的div，如何使小的div垂直居中在大的div中？

html结构

示例样式

解决方案1：table-cell  +  vertical-align

display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以可以设置垂直居中

设置css样式后

css样式

解决方案2：absolute  +  transform

css样式同水平居中，同样适用定位和偏移解决垂直居中

css样式

解决方案3：flex  +  align-items

设置display:flex;会使子元素充满父元素。因为align-items的值默认为stretch。如：

父元素display:flex;样式  再设置align-items:center;  显示为垂直居中

设置css样式后

css样式

3、水平垂直居中(父容器和子容器宽度高度未知)

我们可以综合水平居中和垂直居中一起

例：

（1）inline-block  +  text-align  +table-cell  +vertical-align

css样式1

（2）absolute  +  transform

css样式2

（3）flex  +  justify-content  +  align-items

css样式3

总结：解决此类问题，我们需要了解css属性的值和特性，了解属性以后，对问题进行分解，把特性和分解的问题进行一些联系，问题可以用那些特性实现，综合解决