前端小白进阶之路-技巧篇（垂直水平居中）
原创前端小白进阶之路-技巧篇（垂直水平居中）
原创
在前端布局中居中方式可以说是家常便饭，几乎所有地方都需要用到他，我们常见的就是水平居中和垂直居中。今天小编带大家就看看常用到的这些居中方式都有哪些实现方式。
水平居中：水平居中就是为了让子元素在父元素中排列在水平中心位置，实现方式很多，我们看几种常用的。
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
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。