如何使用CSS將元素居中

在某些情況下,使用CSS居中元素總是很容易的,而在其他情況下則很難。這是如何以CSS為中心以及現代CSS技術的完整列表

如果需要水平或垂直居中,則在CSS中居中元素是一項非常不同的任務。

在這篇文章中,我將解釋最常見的場景以及如何解決它們。如果提供了新的解決方案彈性盒我忽略了舊技術,因為我們需要繼續前進,而且Flexbox多年來一直受瀏覽器支持(包括IE10)。

水平居中

文本

文本很簡單,可以使用text-align屬性設置為center

p {
  text-align: center;
}

積木

將非文本內容居中的現代方法是使用Flexbox:

#mysection {
  display: flex;
  justify-content: center;
}

裡面的任何元素#mysection將水平居中。

Center horizontally


如果您不想使用Flexbox,這是另一種方法。

通過在左邊和右邊應用自動邊距並設置元素的寬度,可以將所有非文本內容居中放置:

section {
  margin: 0 auto;
  width: 50%;
}

以上margin: 0 auto;是以下內容的簡寫:

section {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

記住將項目設置為display: block如果它是一個內聯元素。

垂直居中

傳統上,這一直是一項艱鉅的任務。現在,Flexbox為我們提供了一種以最簡單的方式完成此操作的好方法:

#mysection {
  display: flex;
  align-items: center;
}

裡面的任何元素#mysection將垂直居中。

Center vertically

垂直居中和水平居中

可以組合使用Flexbox垂直和水平居中的技術,以完全將頁面中的元素居中。

#mysection {
  display: flex;
  align-items: center;
  justify-content: center;
}

Center both vertically and horizontally

可以使用CSS網格

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

免費下載我的CSS手冊


更多CSS教程: