常用的几种元素居中办法

1、margin大法之水平居中

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

margin: 0 auto;

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

margin-left: auto;
margin-right: auto;

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

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

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

1. 给父级样式设置： postion: relative;
2. 给子元素设置：position: absolut;
3. 将子元素的top/right/bottom/left设置为：0；
4. 在子元素上设置：margin: auto;

/* 示例代码 */
.father {
    position: relative;
}

.son {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
}

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

1. 给父级样式设置： postion: relative;
2. 给子元素设置：position: absolut;
3. 对子元素设置left/top: 50%;
4. 对子元素设置：transform: translate(-50%,-50%);

/* 示例代码 */
.father {
    position: relative;
}

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

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

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

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

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

5、总结

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

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