慢慢搞懂父級元素裡的子元素垂直居中問題

2021-07-24 07:07:29 字數 1084 閱讀 6517

在web頁面布局中，居中是很常見的問題，針對不同的情況，使用居中的方法也不同，最近在網上看了大量的文章，部落格，總結出了一些常用且好用的方法。

之前統一設定了父元素：

.parent1,.parent2,.parent3,.parent4,.parent5，.parent6
加上顏色為了區分

1.子元素定寬（相容性ie8+）

定寬水平垂直居中


.parent1


.son1
或者（相容低版本ie）

.parent1


.son1

2.子元素不定寬（相容性ie8+）

不定寬水平垂直居中



.parent2


.son2
區別在於，子元素使用display:table；這樣子元素將以最小寬度展現

3.浮動元素水平垂直居中（相容性ie8+）

浮動元素水平垂直居中
這裡注意，為了實現居中效果，在本需要居中的.son3前加了一層div，然後

.parent3


.son3-p


.son3
4.絕對定位實現水平垂直居中（相容性ie8+）常用於居中

絕對定位實現水平垂直居中 ie8+


.parent4


.son4
5.flex實現水平垂直居中（ie9+）

flex實現水平垂直居中


.parent5


.son5
6.transform實現水平垂直居中（ie9+）

transform實現水平垂直居中



.son6

使用CSS將塊級元素在父元素裡垂直居中

1.父子元素position定位改變子元素位置 子元素的css position absolute fixed top 0 right 0 bottom 0 left 0 margin auto 好處在於此方法不用知道元素寬高2.父子元素position定位改變子元素位置 position abso...

position屬性在父級元素和子級元素中的影響

父層class zi1 子層1div class zi2 子層2div div body html 兩個父級物件新增position absolute後 將最外層的父級物件去掉後 保留最外層父物件的position absolute，取消第二層的div的絕對定位 設定該屬性後，物件會脫離正常文件流，...

子元素的垂直margin值對父元素的影響

首先得說一下 margin摺疊 所謂margin摺疊，即相鄰的不同margin值有可能會被摺疊成同乙個margin值。看清楚哦，只是有可能會。至於哪些是相鄰元素？哪些又會存在摺疊？這個鏈結裡闡述很全面。這裡只分析子元素的垂直margin值對父元素的影響 html結構 灰色父塊，紅色子塊，綠色子塊，白...