小div在大div裡面水平垂直居中的實現方法

    初學前端時，我們都經常會練習實現關於水平垂直居中。那麼你們都會用哪種方法呢？其實關於如何設定小盒子在大盒子裡面水平垂直方向同時居中的實現方法有很多種，那麼今天我就總結一下常用水平垂直居中的方法。

（水平垂直居中效果圖）

---

Ⅰ 方法一：使用定位的方法（如下圖）

（圖1使用定位方法,需要知道子元素的寬高,但是不需要知道父元素的寬高.）

（我把我的樣式程式碼貼上到下邊了）

.bg-box {width: 200px;height: 200px;margin:30px auto;border: 1px solid red;position:relative;}

.sm-box {width: 100px;height: 100px;border: 1px solid red;background: red;position:absolute； top: 50%;left:50%;margin-top: -50px; margin-left: -50px; } 

---

Ⅱ 方法二:利用定位及margin:auto實現（如下圖）

（圖2實現原理是設定margin自動適應,然後設定定位的上下左右都為0,就如四邊均衡受力從而實現盒子的居中;）

（我把我的樣式程式碼貼上到下邊了）

.bg-box {width: 200px;height: 200px;margin:30px auto;border: 1px solid red;position:relative;}

.sm-box {width: 100px;height: 100px;border: 1px solid red;background: red;position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;} 

---

Ⅲ 使用display:table-cell; （如下圖）

（圖3實現原理: display:table-cell屬性指讓標籤元素以表格單元格的形式呈現，類似於td標籤.組合使用vertical-align,text-align,可以使父元素內的所有行內元素水平垂直居中（也就是將內部的元素設定display:inline-block））

（我把我的樣式程式碼貼上到下邊了）

.bg-box {width: 200px； height: 200px;border: 1px solid red;display: table-cell;vertical-align: middle;text-align: center;}

 .sm-box { width: 100px；height: 100px;border: 1px solid red;background: red; display: inline-block; }       

---

Ⅳ 方法四:使用伸縮佈局display:flex；（如下圖）

（圖4 我覺得這個方法是最簡單，最好用）

（我把我的樣式程式碼貼上到下邊了）

.bg-box { width: 200px;height: 200px;border: 1px solid red;display: flex; justify-content: center;  align-items: center;        }

 .sm-box {width: 100px;height: 100px;border: 1px solid red; background: red;}     

---

Ⅴ 計算四周的間距設定子元素與父元素之間的margin-top和margin-left;（如下圖）

（圖5方法需要同時知道父元素與子元素的寬高,不方便日後的維護.）

（我把我的樣式程式碼貼上到下邊了）

.bg-box { width: 200px;height: 200px;border: 1px solid red; }

.sm-box { width: 100px;height: 100px;border: 1px solid red;  background: red;  margin-top: 50px; margin-left: 50px; }   

（總結這幾種常見的方法，希望對初學前端者有用！    ---懿左左）

作者：懿左左
連結：