在前端布局中居中方式可以說是家常便飯,幾乎所有地方都需要用到他,我們常見的就是水平居中和垂直居中。今天小編帶大家就看看常用到的這些居中方式都有哪些實現方式。
水平居中:水平居中就是為了讓子元素在父元素中排列在水平中心位置,實現方式很多,我們看幾種常用的。
1. 使用display:inline-block和text-align:center
原理就是將子容器設置為行內塊元素,然后給父容器設置讓文字居中的屬性以達到目的。
缺點就是里面文字都會居中,可單獨設置樣式來解決。
2. 使用display:table和margin:0 auto
原理就是先將子容器設置為塊級表格來顯示,然后設置居中來實現。缺點就是不兼容ie低版本瀏覽器。
在這里小編建了一個前端學習交流扣扣群:132667127,我自己整理的最新的前端資料和高級開發教程,如果有想需要的,可以加群一起學習交流
3. 使用position:absolute和transform
原理就是先將子容器設置為相對定位,移動左側距離為相對寬度的一半,這樣會使整個容器的左側在一半的線的位置,看起來靠右了,我們需要再通過向左移動子容器的一半來達到目的。
缺點就是transform屬于css3內容,存在瀏覽器兼容問題??梢詫ransform換成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屬性,有瀏覽器兼容問題??梢詫ransform換成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
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。