web開發經常使用的幾種居中形式

一 水平居中
二 水平垂直居中
三 針對文本內容的垂直居中

一 水平居中

要居中的元素A有width屬性

給元素A添加 margin：0,auto；(代碼演示)

ps: 此外，margin: auto;和margin:0 auto;產生一樣效果的緣由移步

---

要居中的元素B沒有width屬性

給B添加display:inline-block屬性，並在B的外面包一層div且添加text-align:center;

ps：text-align:center是讓塊狀裏面的元素（好比文字）居中。

---

要居中的元素C 是絕對定位的也就是其position爲absolute

給C添加margin: auto; top:0; left:0; right:0; bottom:0;以及width和height屬性 ，並確保C的外層父元素position: relative;

ps:

設置top,left,bottom,right 屬性 把元素充滿了容器，同時自身指定了寬度，總寬度（固定） = width（固定） + margin-left + margin-right;

當margin設置爲auto的時候，左右邊距會平分，元素天然就居中了(且是水平垂直居中)

---

二 水平垂直居中：

要居中的元素C沒有width屬性及height屬性

給C的外層父元素添加display: flex; align-items: center; justify-content: center; 屬性(注意瀏覽器的兼容性)

Or

給C添加margin: auto; 而且確保C的外層父元素 display: flex; (注意瀏覽器兼容性)

ps: flexBox的知識請移步阮一峯大神的博客

---

針對文本內容的垂直居中:

父元素有width和height屬性以及text-align: center; 同時給要居中的元素D添加line-height爲父元素的height值

ps: line-height 垂直居中原理 請移步

---

all.

by 潘小閒