1、margin大法之水平居中

在水平方向使用需要实现居中时，可对子元素设置：

  1. margin: 0 auto;

但是并不推荐在任意一个地方都这样写，除非确定对上下 margin 的设置不会影响到布局，否则建议这样写：

  1. margin-left: auto;
  2. margin-right: auto;

这种方式通常用来居中电脑端有固定宽度的版心。

2、 margin大法之水平且垂直居中

这种方式主要依赖定位（position）实现，但也靠关键的margin起效，所以我把它归为margin大法中了。使用方式是：

  1. 给父级样式设置： postion: relative;
  2. 给子元素设置：position: absolut;
  3. 将子元素的top/right/bottom/left设置为：0；
  4. 在子元素上设置：margin: auto;
  1. /* 示例代码 */
  2. .father {
  3.     position: relative;
  4. }
  6. .son {
  7.     position: absolute;
  8.     top: 0;
  9.     right: 0;
  10.     bottom: 0;
  11.     left: 0;
  12.     margin: 0;
  13. }

3、position和transform的结合实现居中

  1. 给父级样式设置： postion: relative;
  2. 给子元素设置：position: absolut;
  3. 对子元素设置left/top: 50%;
  4. 对子元素设置：transform: translate(-50%,-50%);
  1. /* 示例代码 */
  2. .father {
  3.     position: relative;
  4. }
  6. .son {
  7.     position: absolute;
  8.     top: 50%;
  9.     left: 50%;
  10.     transform: translate(-50%,-50%);
  11. }

top、left是父级坐标原点来移动的，transform的translate是以子元素本身的坐标原点来移动的。如果不用translate，可以自己根据子元素的宽高算好偏移量来设置margin-top/margin-left,但这样做比较麻烦。

4、 弹性布局（flex）实现居中

css3中提供了一种响应式布局的方案：弹性盒子。他可以适应不同屏幕的大小和不同的设备类型。同时，它也提供了更加有效地方式来对容器的子元素进行排列和对齐，以及分配剩余空白空间等。在移动端的使用场景居多。

  1. .father {
  2.     display: flex;
  3.     justify-content: center;
  4.     align-items: center;
  5. }

5、总结

  1. 除了方法3，其余方法不依赖子元素的计算；
  2. 使用 postion 时，有个口诀“子绝父相”；
  3. 这些方法都具有自适应性，我们不用特别关心父元素的宽高即可让子元素居中。
  4. 效果相同的情况，用代码量小的。

以上内容演示请看 —> 代码演示