垂直居中總結

單個塊級元素垂直居中

"parent">

"son">

#parent

設定tabl-cell的元素，寬度和高度的值設定百分比無效，需要給它的父元素設定display: table; 才生效；table-cell不感知margin，在父元素上設定table-row等屬性，也會使其不感知height；設定float或position會對預設布局造成破壞，可以考慮為之增加乙個父div定義float等屬性；內容溢位時會自動撐開父元素

#parent

#son
/*優缺點
- 優點：使用margin-top相容性好；不管是塊級還是行內元素都可以實現
- 缺點：**較多；脫離文件流；使用margin-top需要知道高度值；使用transform相容性不好（ie9+）*/
或/*原理：當top、bottom為0時,margin-top&bottom會無限延伸佔滿空間並且平分*/
#parent
#son
/*優缺點
- 優點：簡單;相容性較好(ie8+)
- 缺點：脫離文件流*/

水平垂直居中分各種元素不同方法；

#parent

#son

定位

#parent

#son

絕對居中

#parent

#son

布局相關：

利用flex布局實現左側固定右側自適應的布局

左列定寬

右列自適應

#parent

#left 
#right

2絕對定位實現

#parent

#left 
#right

三列布局

兩列定寬一列自適應

優先考慮flex布局

左列定寬

中間定寬
右列自適應

#parent 

#left 
#center 
#right

雙飛翼布局：左右兩側定寬中間自適應

中間自適應
左列定寬
右列定寬

#parent 

#left 
#center 
#right

#parent 

#left 
#center 
#right

CSS垂直居中總結

小白總結了平時遇到的css垂直居中的方法，大家在遇到元素垂直居中的需求時，可以從以下三種思路供進行考慮 借助於行高實現垂直居中。借助絕對定位實現垂直居中。在知道足夠的資訊下，使用偏移屬性實現。第一種 借助於行高實現垂直居中 這種方式適用於文字 表單元素等所有的行內元素，適用範圍比較廣泛。實現的方法很...

水平垂直居中總結

水平居中 1.若是行內元素,給其父元素設定text align center,即可實現行內元素水平居中.2.若是塊級元素,給元素設定margin 0 auto 即可.3.若子元素包含float left屬性,為了讓子元素水平居中,則可讓父元素寬度設定為fit content,並且配合margin,作...

垂直居中和水平居中總結

container center 以上 可使塊級子元素水平垂直居中，為inline block的子元素只能垂直居中，若也想其水平垂直居中確保在父元素樣式中新增 text align center。關鍵必須設定其父元素固定寬高。即使有多個子元素也一樣可以垂直水平居中。當子元素都為行內元素 行內元素不能...