CSS垂直居中水平居中方法

2021-06-22 10:23:31 字數 1239 閱讀 7715

#center

剛在別人的部落格裡看到這種方法時真的覺得很奇葩,以下是大神的解釋:

解釋

1、在普通內容流中,margin:auto的效果等同於margin-top:0;margin-bottom:0。

2、position:absolute使絕對定位塊跳出了內容流,內容流中的其餘部分渲染時絕對定位部分不進行渲染。

3、為塊區域設定top: 0; left: 0; bottom: 0; right: 0;將給瀏覽器重新分配乙個邊界框,此時該塊block將填充其父元素的所有可用空間,父元素一般為body或者宣告為position:relative;的容器。

4、  給內容塊設定乙個高度height或寬度width,能夠防止內容塊佔據所有的可用空間,促使瀏覽器根據新的邊界框重新計算margin:auto

5、由於內容塊被絕對定位,脫離了正常的內容流,瀏覽器會給margin-top,margin-bottom相同的值,使元素塊在先前定義的邊界內居中。

這麼看來, margin:auto似乎生來就是為絕對居中設計的,所以絕對居中應該都相容符合標準的現代瀏覽器。

簡而言之:絕對定位元素不在普通內容流中渲染,因此margin:auto可以使內容在通過top: 0; left: 0; bottom: 0;right: 0;設定的邊界內垂直居中。

優點

1.支援跨瀏覽器,包括ie8-ie10.

2.無需其他特殊標記,css**量少

3.支援百分比%屬性值和min-/max-屬性

4.只用這乙個類可實現任何內容塊居中

5.不論是否設定padding都可居中(在不使用box-sizing屬性的前提下)

6.內容塊可以被重繪。

7.完美支援居中。

缺點:

1.必須宣告高度(檢視可變高度variable height)。

2.建議設定overflow:auto來防止內容越界溢位。(檢視溢位overflow)。

3.在windows phone裝置上不起作用。

瀏覽器相容性:

chrome,firefox, safari, mobile safari, ie8-10.

絕對定位方法在最新版的chrome,firefox, safari, mobile safari, ie8-10.上均測試通過。

css垂直水平居中方法

1.塊級元素中的行內元素水平居中 給塊級元素設定 text align center 2.塊級元素1中的塊級元素2水平居中 1 給塊級元素2設定 margin 0 auto 2 給塊級元素2設定 display inline block 給塊級元素1中設定 text align center 1.塊...

CSS水平垂直居中方法總結

部分html 如下 div class wrap block div class block center 塊兒居中 div div div class wrap inline span class inline center 內聯居中 span div 一 absolute 二 table inl...

CSS總結水平垂直居中方法

設定塊級元素內文字的水平居中對齊方式,如div p h1 h6等塊級元素標籤 單行文字垂直方向上居中,使其等於height的高度 好好學習天天向上 p p若有多行文字,則新增以下 center 好好學習天天向上好好學習天天向上好好學習天天向上好好學習天天向上好好學習天天向上 p div center...