CSS 實現盒子水平居中、垂直居中和水平垂直居中的方法

 CSS 實現盒子模型水平居中

水平居中效果圖以下：

HTML：

CSS 全局樣式：

方法一：使用margin: 0 auto;（只適用於子盒子有寬的時候）

方法二：text-align + display（子盒子有或沒有寬度的時候都適用）

方法三：position 定位（只適用於子盒子有寬度和高度的時候）

方法四：position + transform（子盒子有或沒有寬高的時候都適用）

方法五：flex 佈局（彈性佈局）（子盒子有或沒有寬高的時候都適用）

CSS 實現盒子模型垂直居中

 垂直居中效果圖以下

HTML 和 CSS全局樣式同上。

方法一：position 定位（適用於子盒子有寬度和高度的時候）

方法二：position + transform（子盒子有或沒有寬高的時候都適用）

 

 方法三：flex 佈局（子盒子有或沒有寬高的時候都適用）

CSS 實現盒子模型水平垂直居中

水平垂直居中效果圖以下

HTML 和 CSS全局樣式同上

方法一：position 定位（適用於子盒子有寬度和高度的時候）

方法二：position + transform（子盒子有或沒有寬高的時候都適用）

方法三：flex 佈局（子盒子有或沒有寬高的時候都適用）