前端小白进阶之路-技巧篇(垂直水平居中)
在前端布局中居中方式可以说是家常便饭,几乎所有地方都需要用到他,我们常见的就是水平居中和垂直居中。今天小编带大家就看看常用到的这些居中方式都有哪些实现方式。
“只有客户发展了,才有我们的生存与发展!”这是创新互联公司的服务宗旨!把网站当作互联网产品,产品思维更注重全局思维、需求分析和迭代思维,在网站建设中就是为了建设一个不仅审美在线,而且实用性极高的网站。创新互联对成都网站建设、成都网站制作、网站制作、网站开发、网页设计、网站优化、网络推广、探索永无止境。
水平居中:水平居中就是为了让子元素在父元素中排列在水平中心位置,实现方式很多,我们看几种常用的。
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
文章题目:前端小白进阶之路-技巧篇(垂直水平居中)
当前URL:http://scyanting.com/article/jgdppe.html