CSS常用居中方式

2022-09-19 02:30:19 字數 529 閱讀 3926

用絕對定位,使它的top、left、right、bottom都為0就可以實現居中,水平居中和垂直居中均可實現

.box

利用負的margin來進行居中,需要知道固定寬高,限制比較大。

.box

.box

.chl_box

ie9 以下不支援

.box

將父元素轉換成**單元格顯示,然後使用垂直居中實現

.box

.chl_box

使用定位百分比確定邊距,從而確定寬高

這種較為靈活。需要保證left和right的百分數一樣就可以實現水平居中,保證top和bottom的百分數一樣就可以實現垂直居中。

.box

.chl_box

參考:

css之div盒子居中常用方法大全 - 風向決定髮型哦的文章 - 知乎

css常用的居中方式

常用的居中方式 這種居中方式可以水平居中塊級元素中的行內元素inline,inline block text align center display inline block width 100px 居中 但是這個方法居中塊級元素中的塊級元素時,如果div中的div設定了自己的寬度,那麼只能居中,...

css居中方式

水平居中的text align center 和 margin 0 auto 前者是針對父元素進行設定而後者則是對子元素。他們起作用的首要條件是子元素必須沒有被float影響。垂直居中的line height 作用在父元素上,當他的值等於父元素的height值時,內部的文字就會自動的垂直居中 萬能p...

css常用的幾種居中方式

css常用的幾種居中方式,可以直接拿來用 1,position absolute定位 box 複製 2,position fixed box 複製 3,position fixed,margin auto box 複製 4,position absolute,margin auto box 複製 5...