css搞定所有垂直居中問題

2022-03-07 01:42:44 字數 4333 閱讀 3429

doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>


title


>


<


style


>


#container


style


>


<


body


>


<


div 


id="container"


>


123123131


div>


body


>


html


>
後面提供的3個例子中，只要把裡面的#pic 的寬高去除，也是可以實現任意大小的div居中的。往裡面填充任意的多行文字，也是可以居中的。

實際上，有這樣的規律：

任意大小的div垂直居中 =》任意多行文字垂直居中 =》 固定大小的div垂直居中 =》垂直居中

css3

doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>


title


>


<


style


>


#container


#pic


style


>


<


body


>


<


div 


id="container"


>


<


br>


33333333\


<


br>


<


div 


id="pic"


>


div>


div>


body


>


html


>
執行結果：

後者

外部容器 tablecell（ie6不支援） + middle

doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>


title


>


<


style


>


#container


#pic


style


>


<


body


>


<


div 


id="container"


>


123123131


<


br>


33333333\


<


br>


<


div 


id="pic"


>


div>


div>


body


>


html


>
執行結果：

相容ie6

doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>


title


>


<


style


>


#container


#pic


#container:before


style


>


<


body


>


<


div 


id="container"


>


<


div 


id="pic"


contenteditable


>


1231233 


<


br>


1231233 


<


br>


1231233 


<


br>


1231233 


<


br>


1231233 


<


br>


1231233 


<


br>


div>


1213


<


br>


div>


body


>


html


>
執行結果：

彈性布局

doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>


title


>


<


style


>


#container


#pic


style


>


<


body


>


<


div 


id="container"


>


<


br>


33333333\


<


br>


<


div 


id="pic"


>


div>


div>


body


>


html


>
執行結果：（往裡面再套乙個容器，實現水平居中，而容器是垂直居中，就可以實現內容螢幕居中了）

參考：

<


style


>


#root


style


>


<


body


>


<


div 


id="root"


>


1212313122


div>


body


>



doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>


title


>


<


style


>


#container


#pic


/*#container


*//*


#pic


*/style


>


<


body


>


<


div 


id="container"


>


<


div 


id="pic"


>1


div>


div>


body


>


html


>

css垂直水平居中問題

1 水平垂直居中方法1 對於元素不確定寬度和高度的時候，特別適用 父元素div display table cell vertical align middle 垂直居中 text align center 水平居中 子元素div display line block table cell同樣會被其...

CSS垂直居中布局問題

最近總被這玩意坑，面試官也老愛問，還有別的方式嗎 1 使用絕對定位 元素在過度受限情況下，將margin設定為auto，瀏覽器會重算margin的值，過度受限指的是同時設定top bottom與height或者left right與width 有點需要注意的是，設定子元素的寬度高度。123 html...

css 水平居中 垂直居中 水平垂直居中

一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...