CSS8種垂直居中方式

2022-08-13 19:09:11 字數 604 閱讀 1687

1.通過vertical-align:middle實現垂直居中

.son

.son

3.通過偽元素「:before」實現垂直居中

.father

.father:before

.son

4.通過dispaly:table-cell實現css垂直居中

.father

.son

5.通過隱藏節點實現css垂直居中

.hide

.son

6.已知父元素高度通過transform實現css垂直居中

.son

7.未知父元素高度通過transform實現css垂直居中

.father

.son

8.通過line-height實現css垂直居中

該方法適用於子元素為單行文字的情況

.father

.son

——學習記錄

CSS水平垂直居中方式

1.grid布局實現 一 father 2.grid布局實現 二 father 3.grid配合margin實現 father son 4.flex布局實現 father 5.flex配合margin實現 father son 6.使用display table cell實現 father son ...

CSS 8種常見的CSS水平和垂直都居中的方法

特點 父容器要設定寬高,需要知道子容器寬高,偏移量是子容器寬高的一半且是負值,相容性好 absolute margin負值偏移布局 layout.absolute layout.absolute article 1.absolute margin負值偏移 父容器要設定寬高,需要知道子容器寬高 特點 ...

css垂直居中方式的總結

工作中還是會用到很多 垂直居中相關的知識 所以我覺得有必要總結一下。我想先問一下你們能想到的實現垂直居中的方法有哪些?1 line height方式 2 table布局 3 inline block方式 4 絕對定位之automargin 5 絕對定位之負margin 6 transform 7 額...