元素居中問題詳解

2021-08-21 07:42:11 字數 947 閱讀 7758

子元素水平居中于父元素中

內容區域
1) width + margin

.par 


.chi
2) 行內元素居中

.par 


.chi
3) 定位

.par 


.chi
4) table

.par 


.chi
5) flex

.par 


.chi
子元素垂直居中

1) 定位

.par 


.chi
2) flex

.par 


.chi
3) table

.par 


.chi
水平垂直居中

1) 定位

.par 


.chi
2) flex

.par 


.chi
3) table

.par 


.chi
.par 


.chi
左側定寬右側適應
內容區域


內容區域
1) float + margin

.left 


.right
2) flex

.box 


.left 


.right

元素居中問題

布局 1.正常文件流 主要是 一行一行 2.浮動布局 浮動流 主要解決 頁面模組 水平排列 3.定位 主要解決重疊 一 固定定位 position fixed 1.完全脫離文件流，不佔據空間 2.沒有設定寬高元素大小會變成內容實際大小來決定，設定width和height就由width和height決...

CSS html元素型別與居中問題詳解

深刻理解盒子模型與元素型別，有助於快速確定布局方式 一 盒子模型 從外到裡 margin border padding content。關鍵 height與width指的是content文字區的尺寸。二 元素型別及本質區別 1 inline 內聯元素。本質特點 預設baseline對齊，且conte...

塊級元素垂直居中問題

1.寬高固定 絕對定位 樣式 box aaa 當然，也可以將margin left 50px margin top 50px 換成 transform translate 50 50 html 2.寬高不固定 絕對定位 aaa 3.after偽類實現垂直居中對齊 樣式 demo demo after...