css讓元素水平垂直居中

2021-09-27 12:32:31 字數 504 閱讀 9138

利用flex布局

/* 無需知道被居中元素的寬高 */


.container
利用absolute+transform

/* 無需知道被居中元素的寬高 */


/* 設定父元素非 `static` 定位 */


.container 


/* 子元素絕對定位，使用 translate的好處是無需知道子元素的寬高 */


/* 如果知道寬高，也可以使用 margin 設定 */


.box
利用grid布局

/* 無需知道被居中元素的寬高 */


.container 


.box
利用絕對定位和margin:auto

/* 無需知道被居中元素的寬高 */


.box 


.container
** 

CSS實現元素水平居中 垂直居中 水平垂直居中

1.元素水平居中 1.1行內元素水平居中 1.2塊級元素水平居中 1.2.1定寬塊級元素的水平居中 1.2.2不定寬塊級元素水平居中 2.元素垂直居中 2.1 單行文字垂直居中 2.2 多行文字垂直居中 2.3塊級元素垂直居中 3.元素水平垂直居中 像文字text 影象img 按鈕等行內元素要實現水...

css 水平居中 垂直居中 水平垂直居中

一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...

css水平居中 垂直居中 水平垂直居中

css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...