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

2021-09-26 09:49:56 字數 1698 閱讀 8540

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

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

當父div的行高等於自身高度時，內部的行內元素會上下居中顯示。行內塊沒有固定高度時也會上下居中顯示。通過文字居中屬性

text-align:center
,可以使內部行內元素或行內塊元素左右居中顯示。
注： 行高如果設定為當前父div的高度(400px)的話，有固定高度的子div並不會居中顯示的，問題出在瀏覽器預設將其當做文字居中的，即把它當做了一段文字（chrome預設font-size:16px;hight:21px）進行居中，沒把它當做高度100px進行居中。所以需要對父div的

line-height
進行調整。以
font-size:0
（對應的字型高度為0）為例子，則需要line-height增加乙個子div的高度（400px 100px;）。

利用定位屬性（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,可以使內部行內元素左右居中顯示。123 利用定...

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...