多個你不知道的 CSS 居中方案！

做者： Ahmad Shadeed
譯者：前端小智
來源：ishadeed
移動端閱讀： https://mp.weixin.qq.com/s/kp...

---

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

水平居中

內聯元素

要使內聯元素（如連接，span 或img）居中，使用 text-align: center 足夠了。

<div class="desk">
   <span class="plate"></span>
</div>

.desk {
  text-align: center;
}

對於多個內聯元素，也可使用text-align：center:

<div class="desk">
   <span class="plate"></span>
   <span class="plate"></span>
</div>

.desk {
  text-align: center;
}

Flexbox

使用 flexbox 也能夠快速居中元素：

.desk {
  display: flex;
  justify-content: center;
}

對於多個內聯的項目，也能夠正常工做：

CSS Grid

使用網格容器時，圖中的盤子將根據其網格區域居中。 請注意，除非將它們包裹在一個元素中，不然這將不適用於多個盤子。

.desk {
  display: grid;
  justify-content: center;
}

塊元素

Auto Margin

寬度和高度已知的塊元素能夠經過設置margin-left:auto 和 margin-right:auto 居中元素。

.plate {
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
}

對於多個塊元素，它們應該包裝在一個元素中，而後讓這個父元素居中。

.tray {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

Flexbox

對於 flexbox 一樣也是使用 justify-content:center 來居中元素：

.desk {
  display: flex;
  justify-content: center;
}

對於多個元素，咱們不須要將它們包裹在一個元素中，flexbox 能夠將它們都居中。

CSS定位

經過絕對定位，咱們能夠輕鬆地經過CSS transform將其水平居中。

.plate {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

在已知元素寬度的狀況下，可使用負邊距代替CSS transform。

.plate {
  position: absolute;
  left: 50%;
  margin-left: -60px;
}

垂直居中

內聯元素

Vertical Padding

垂直居中元素最簡單的方法之一是使用padding:

padding-top: 24px;
  padding-bottom: 24px;
}

Vertical Align

vertical-align屬性可用於一個或多個元素。

在此示例中，叉子和刀子應與桌子垂直居中。

.desk {
  text-align: center;
}

.plate,
.fork,
.knife {
  vertical-align: middle;
}

Flexbox

爲了對齊盤子，叉子和刀，咱們可使用 flexbox:

.desk {
  display: flex;
  justify-content: center;
  align-items: center;
}

塊元素

絕對定位

經過絕對定位元素，可使用 CSS transform將元素垂直居中：

.plate {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

若是知道元素高度，則可使用負邊距代替transform。

.plate {
  position: absolute;
  top: 50%;
  margin-top: -60px;
}

CSS Grid

使用CSS網格，咱們可使用align-items將項目垂直於其網格區域居中。

.desk {
  display: grid;
  align-items: center;
}

水平垂直居中

內聯元素

Padding 和Text Align

.plate {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

其餘元素類型

絕對定位

.plate {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

Flexbox

經過 justify-content:center 和 align-items:center 就能夠將元素垂直水平居中：

.plate {
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS Grid

經過place-items屬性就能夠經過，它結合了justify-content和align-items:

.desk {
  display: grid;
  place-items: center;
}

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://ishadeed.com/article/...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。