溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2020-08-06 20:38:20 來源:ITPUB博客 閱讀:169 作者:前端程序猿 欄目:web開發

在前端布局中居中方式可以說是家常便飯,幾乎所有地方都需要用到他,我們常見的就是水平居中和垂直居中。今天小編帶大家就看看常用到的這些居中方式都有哪些實現方式。

水平居中:水平居中就是為了讓子元素在父元素中排列在水平中心位置,實現方式很多,我們看幾種常用的。

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


向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女