用CSS讓DIV上下左右居中的方法

2022-07-10 08:15:10 字數 1262 閱讀 5750

例如 乙個父div(w:100%;h:400px)中有乙個子div(w:100px;100px;)。讓其上下左右居中。

利用**單元格的居中屬性。
注：

當父div的行高等於自身高度時，內部的行內元素會上下居中顯示。通過文字居中屬性text-align:center,可以使內部行內元素左右居中顯示。

123
利用定位屬性（top、left、right、bottom）百分比的模式。若為100%，則代表偏移的長度為父div的高度（寬度）的100%。
定位屬性top和bottom（或是left和right）值分別設定為0，但子div有固定高度（寬度），並不能達到上下（左右）間距為0，此時給子div設定margin:auto會使它居中顯示。
彈性盒子中只要給彈性子元素設定 margin: auto; 可以使得彈性子元素上下左右居中。
flex相容性，以及存在的已知問題

利用定位屬性（top、left、right、bottom）百分比的模式。若為100%，則代表偏移的長度為父div的高度（寬度）的100%。
注：

方法二和方法三相容性要比其它好些。最簡單的是彈性盒子。

margin負值可以用2d轉換代替。優點是不用計算子div的寬高。

margin-top: -h/2=>transform: translatey(-50%)

margin-bottom: -h/2=>transform: translatey(50%)

margin-left: -h/2=>transform: translatex(-50%)

margin-right: -h/2=>transform: translatex(50%)

can i use

css-vertical-center-solution

css實現垂直居中的5種方法--前端觀察

盼先生

用CSS讓DIV上下左右居中的方法

例如 乙個父div w 100 h 400px 中有乙個子div w 100px 100px 讓其上下左右居中。利用 單元格的居中屬性。注 當父div的行高等於自身高度時，內部的行內元素會上下居中顯示。行內塊沒有固定高度時也會上下居中顯示。通過文字居中屬性 text align center,可以使...

CSS 上下左右居中筆記

結果 2.彈性盒子flex justify content 內容對齊,屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線 main axis 對齊。justify content flex start flex end center space between space around align ...

實現div的上下左右都居中

把 綠色那個div 上下頁居中 讓層垂直居中於瀏覽器視窗 其實解決的思路是這樣的 首們需要position absolute 絕對定位。而層的定位點，使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以二。如 乙個層寬度是400，高度是300。使用絕對定位距離上部與左部都設定成50 而m...