在前端布局中居中方式可以说是家常便饭,几乎所有地方都需要用到他,我们常见的就是水平居中和垂直居中。今天小编带大家就看看常用到的这些居中方式都有哪些实现方式。
水平居中:水平居中就是为了让子元素在父元素中排列在水平中心位置,实现方式很多,我们看几种常用的。
1. 使用显示:inline-block和text-align:中心
原理就是将子容器设置为行内块元素,然后给父容器设置让文字居中的属性以达到目的。
缺点就是里面文字都会居中,可单独设置样式来解决。
2. 使用显示:表和保证金:0汽车
原理就是先将子容器设置为块级表格来显示,然后设置居中来实现。缺点就是不兼容即低版本浏览器。
在这里小编建了一个前端学习交流扣扣群:132667127,我自己整理的最新的前端资料和高级开发教程,如果有想需要的,可以加群一起学习交流
3.使用位置:绝对和变换
原理就是先将子容器设置为相对定位,移动左侧距离为相对宽度的一半,这样会使整个容器的左侧在一半的线的位置,看起来靠右了,我们需要再通过向左移动子容器的一半来达到目的。
缺点就是变换属于css3内容,存在浏览器兼容问题。可以将变换换成margin-left设置自身宽度一半达到相同的目的。
4. 使用flex和保证金
原理就是通过css3布局属性flex将子容器转换为flex项目情况,然后设置子容器居中即可。
缺点就是css3属性,有浏览器兼容问题。
5. 使用flex和justify-content
原理就是通过css3布局属性flex将子容器转换为flex项目情况,然后通过justify-content
属性来达到居中。这种方式需要给父容器设置这两种属性。
缺点就是css3属性,有浏览器兼容问题。
垂直居中:垂直居中就是为了让子元素在父元素中排列在垂直中心位置,实现方式很多,我们看几种常用的。
1. 使用显示:表格单元和vertical-align:中间
原理就是通过将父容器转换为一个表格单元格来显示,再通过将表格单元格内容垂直居中。
使用时需要将两种属性都设置到父容器身上。
2. 使用位置:绝对和变换
原理类似于水平居中,就是先将子容器设置为相对定位,移动顶部距离为相对高度的一半,这样会使整个容器的顶部在一半的线的位置,看起来靠下了,我们需要再通过向上移动子容器的一半来达到目的。
缺点就是css3属性,有浏览器兼容问题。可以换将变换成margin-top设置自身高度一半达到相同的目的。
3.使用flex和对齐项目
原理就是通过css3布局属性flex将子容器转换为flex项目情况,然后通过对齐项目
属性来达到居中。这种方式需要给父容器设置这两种属性。
缺点就是css3属性,有浏览器兼容问题。
而关于水平垂直同时居中的话有了以上两种方式难道还怕出不来吗,只是需要稍稍结合一下即可,比如以下常见结合使用:
1. 使用绝对和变换
2. 使用flex和justify-content和对齐项目
3.使用inline-block和text-align和表格单元和vertical-align
