CSS實現div盒子水平垂直居中的方式

2021-09-06 20:12:58 字數 823 閱讀 7226

網上看到有很多方式，這裡記錄一下我用起來順手的幾種方式，這裡敲黑板做筆記，哈哈~~
首先預備工作，假設這是登入介面，那通常會涉及到背景撐滿螢幕

明顯看到會出現滾動條；可以用兩種方式讓滾動條消失：

html,body
好啦下面，開始進入正題，實現 class=『middle』 這個div盒子的垂直居中顯示

1.前提是設定好div盒子的高度和寬度

.middle
（1） position：absolute

方式一：元素自身已知寬度

.middle
方式二：元素自身未知寬度

.middle
方式三：

.middle
（2）display:flex

方式一：

#container
方式二：

#container


.middle
（3）display：table；display：table-cell；display:inline-block;



#container


.middle


.inner
ok~~~方法還有很多種，以上是我熟悉的，後面碰到別的情況再做記錄。

css實現文字或者div盒子水平垂直居中的方法

文字 文字 內容屬於行內元素 設定文字外層的盒子 text align center 水平居中 height 100px 垂直居中 line height 100px 垂直居中只要保證行高和盒子高度一致即可 如下 hello 將文字所在的盒子display設定成table cell text ali...

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

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

css實現div水平 垂直居中

示例1 chrome33 ie8測試通過 示例2 chrome33 ie8測試通過 示例4 chrome33測試通過，ie8測試不通過，參考 注 對頁面中所有元素應用box sizing border box樣式是為了將padding margin值都計入width height中，即為元素指定的任...