前端小白进阶之路-技巧篇（垂直水平居中）-创新互联

在前端布局中居中方式可以说是家常便饭，几乎所有地方都需要用到他，我们常见的就是水平居中和垂直居中。今天小编带大家就看看常用到的这些居中方式都有哪些实现方式。

水平居中：水平居中就是为了让子元素在父元素中排列在水平中心位置，实现方式很多，我们看几种常用的。

1. 使用display：inline-block和text-align：center

原理就是将子容器设置为行内块元素，然后给父容器设置让文字居中的属性以达到目的。

缺点就是里面文字都会居中，可单独设置样式来解决。

2. 使用display：table和margin：0 auto

原理就是先将子容器设置为块级表格来显示，然后设置居中来实现。缺点就是不兼容ie低版本浏览器。

在这里小编建了一个前端学习交流扣扣群：132667127，我自己整理的最新的前端资料和高级开发教程，如果有想需要的，可以加群一起学习交流

3. 使用position：absolute和transform

原理就是先将子容器设置为相对定位，移动左侧距离为相对宽度的一半，这样会使整个容器的左侧在一半的线的位置，看起来靠右了，我们需要再通过向左移动子容器的一半来达到目的。

缺点就是transform属于css3内容，存在浏览器兼容问题。可以将transform换成margin-left设置自身宽度一半达到相同的目的。

4. 使用flex和margin

原理就是通过css3布局属性flex将子容器转换为flex item情况，然后设置子容器居中即可。

缺点就是css3属性，有浏览器兼容问题。

5. 使用flex和justify-content

原理就是通过css3布局属性flex将子容器转换为flex item情况，然后通过justify-content

属性来达到居中。这种方式需要给父容器设置这两种属性。

缺点就是css3属性，有浏览器兼容问题。

垂直居中：垂直居中就是为了让子元素在父元素中排列在垂直中心位置，实现方式很多，我们看几种常用的。

1. 使用display：table-cell和vertical-align：middle

原理就是通过将父容器转换为一个表格单元格来显示，再通过将表格单元格内容垂直居中。

使用时需要将两种属性都设置到父容器身上。

2. 使用position：absolute和transform

原理类似于水平居中，就是先将子容器设置为相对定位，移动顶部距离为相对高度的一半，这样会使整个容器的顶部在一半的线的位置，看起来靠下了，我们需要再通过向上移动子容器的一半来达到目的。

缺点就是css3属性，有浏览器兼容问题。可以将transform换成margin-top设置自身高度一半达到相同的目的。

3. 使用flex和align-items

原理就是通过css3布局属性flex将子容器转换为flex item情况，然后通过align-items

属性来达到居中。这种方式需要给父容器设置这两种属性。

缺点就是css3属性，有浏览器兼容问题。

而关于水平垂直同时居中的话有了以上两种方式难道还怕出不来吗，只是需要稍稍结合一下即可，比如以下常见结合使用：

1. 使用absolute和transform

2. 使用flex和justify-content和align-items

3. 使用inline-block和text-align和table-cell和vertical-align