前端小白进阶之路-技巧篇(垂直水平居中)

字数 1014阅读 31

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

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

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

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

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

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

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

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

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

推荐阅读更多精彩内容