E=mc² 的日常: CSS 物件置中

CSS 中可以做到的方法很少，但使用哪一種完全取決於實際情況。我將一一列出，以便您選擇更好地解決您的問題的選項。

水平居中，使用邊距。

<div>
  <div class="center"></div>
</div>.center {  
  height: 30px;
  width: 300px;
  margin: 0 auto;
  background-color: red;
}

您可以使用此方法使任何塊類型元素（div、p、h1、h2 等）在其父級內水平居中。元素寬度應小於父寬度。顯然，除非你看不到它是否居中，如果它佔據了整個寬度。

在相對父級中居中絕對子級

<div class="parent">
  <div class="child"></div>
</div>.parent {
  position: relative;
  height: 100px;
}.child {  
  height: 30px;
  width: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

大家都知道，絕對定位的元素可以在相對定位的父元素中自由排列。絕對子節點使用 top、bottom、left 和 right 屬性獲取與其父節點邊界相關的位置。如果直接父級沒有相對定位，則子級從最近的已定位祖先處進行定位。

在這裡，我們將孩子從頂部和左側強制拉到 50%，並從其寬度和高度再次向頂部和左側拉回一半，使其垂直和水平居中。

使用 flex-box 居中

<div class="parent">
  <div class="child"></div>
</div>.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}.child {  
  height: 30px;
  width: 300px;
}

在我看來，這是沿兩個軸居中的最方便和最流行的方式。但是你必須把你的規則寫給父母。justify-content將它們水平對齊，而align-items將它們垂直對齊。如果將 flex 方向更改為column，上述屬性也將交換它們的工作方向。

使用 CSS 網格居中

<div class="parent">
  <div class="child"></div>
</div>.parent {
  display: grid;
  justify-content: center;
  align-content: center;
  height: 100px;
}.child {  
  height: 30px;
  width: 300px;
}

我們可以像使用 flex-box 一樣使用 CSS 網格。唯一的事情是我們使用align-content而不是align-items來垂直居中。CSS 網格中的 align-items 和 justify-items 用於將項目與其列對齊。CSS 網格描述起來有點複雜，我將在另一篇文章中為您介紹 CSS 網格。

文本居中對齊

<div class="parent">
  <span>One</span>&nbsp;<span>Two</span>&nbsp;<a href="/">Three</a>
</div>.parent {
  text-align: center;
}

幾乎所有讀過這篇文章的人都知道這個 CSS 規則，但我在這裡添加它，所以我涵蓋了問題的所有方面。這就是您將文本與中心對齊的方式。dah...但不僅是文本，它還可以幫助您對齊任何內聯元素，例如 div 內的 span 和錨標記。（  只是為了保持元素之間的空間。）