10 個CSS實作元素居中的方法彙總

英文 | https://javascript.plainenglish.io/10-css-tricks-you-should-know-for-centering-elements-61092d35b659

翻譯 | 楊小愛

在前端開發工程師的日常生活中，使用 CSS 使元素居中是很常見的，這也是面試中經常被問到的問題。

也許你已經使用 flex 或 absolute + transform 來實作它，但你知道至少有 10 種方法可以做到元素居中嗎？是以，在今天的文章中，我為大家整理了10個關于實作元素居中的CSS技巧，希望可以幫助你提升CSS技術。

1、absolute + (-margin)

如果元素的寬度和高度已知，我們可以使用至少 3 種方法來使元素居中。例如，在下圖中，小貓的寬度和高度分别為“500px”和“366px”。我們應該如何居中？

用 ‘absolute + (-margin) ` 很容易完成！代碼如下：

HTML

<div class="container">
  <img class="cat" src="https://images.unsplash.com/photo-1533743983669-94fa5c4338ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1584&q=80" alt="">
</div>      

翻譯結

CSS

.container {
  width: 800px;
  height: 600px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  /* Key css */
  position: relative;
}
.cat{
  width: 500px;
  height: 366px;
  border-radius: 50%;
  position: absolute;
  /* Key css */
  left: 50%;
  top: 50%;
  /* half the width */
  margin-left: -250px;
  /* half the height */
  margin-top: -183px;
}      

這種方法簡單易懂，相容性好，缺點是我們需要知道子元素的寬高。

示範位址：https://codepen.io/qianlong/pen/yLKXLxM

2、 absolute + margin auto

我們還可以通過将所有方向的距離設定為 0 ，并将邊距設定為自動來使小貓居中。

CSS代碼如下：

.container {
  width: 800px;
  height: 600px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  position: relative;
}
.cat{
  width: 500px;
  height: 366px;
  border-radius: 50%;
  /* Key css */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}      

和第一種方法一樣，它的相容性也很好，缺點是需要知道子元素的寬高。

示範位址：https://codepen.io/qianlong/pen/RwMgweO

3、absolute + calc

CSS3 帶來了 calc 計算屬性，它允許我們通過它來居中一個元素，代碼如下：

.container {
  width: 800px;
  height: 600px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  position: relative;
}
.cat{
  width: 500px;
  height: 366px;
  border-radius: 50%;
  position: absolute;
  /* Key css */
  top: calc(50% - 183px);
  left: calc(50% - 250px);
}      

這種方法的相容性取決于calc的相容性，缺點是需要知道子元素的寬高。

示範位址：https://codepen.io/qianlong/pen/zYWzYyR

4、flex

以上三種方法必須提前知道元素的寬高，但元素的寬高不确定怎麼辦？于是就有了flex ，它非常适合這個。

HTML代碼：

<div class="container">
  <span contenteditable="true" class="content">hello medium</span>
</div>      

CSS代碼：

.container {
  width: 400px;
  height: 200px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  /* Key css */
  display: flex;
  align-items: center;
  justify-content: center;
}
.content{
  padding: 20px;
  border-radius: 10px;
  background-color: #e3c1a9;
  color: #ffffff;
}      

這真的很酷，我們可以用很少的代碼來居中一個元素，這是我最喜歡的使用方式。

示範位址：https://codepen.io/qianlong/pen/abYyzvG

5、grid

像 flex 一樣，grid 也可以非常友善地用于使元素居中。

CSS代碼：

.container {
  width: 400px;
  height: 200px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  /* Key css */
  display: grid;
}


.content{
  /* Key css */
  align-self: center;
  justify-self: center;
  padding: 20px;
  border-radius: 10px;
  background-color: #e3c1a9;
  color: #ffffff;
}      

示範位址：https://codepen.io/qianlong/pen/dymzPMa

6、absolute + transform

使用變換，我們還可以在事先不知道元素的寬度和高度的情況下使元素居中。

CSS代碼：

.container {
  width: 400px;
  height: 200px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  /* Key css */
  position: relative;
}
.content{
  /* Key css */
  position: absolute;
  left: 50%;
  top: 50%;
  /* Key css */
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 10px;
  background-color: #e3c1a9;
  color: #ffffff;
}      

示範位址：https://codepen.io/qianlong/pen/KKovwgW

7、text-align + line-height + vertical-align

以上6種方式比較容易了解，在我們的工作中也經常用到，接下來的 4 種方法似乎使用頻率較低，但也值得學習。

首先，我們可以将 span 的“display”屬性設定為“inline-block”。然後通過設定容器的text-align屬性為center，span元素可以水準居中。結合 line-height 和其他屬性使其垂直居中。

CSS代碼：

.container {
  width: 400px;
  height: 200px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  /* Key css */
  text-align: center;
  line-height: 200px;
  font-size: 0px;
}
.content{
  font-size: 16px;
  /* Key css */
  display: inline-block;
  vertical-align: middle;
  line-height: initial;
  text-align: left;
  padding: 20px;
  border-radius: 10px;
  background-color: #e3c1a9;
  color: #ffffff;
}      

示範位址：https://codepen.io/qianlong/pen/dymzPWL

8、css-table

CSS新的table屬性讓我們可以将普通元素變成表格元素的真實效果，通過這個特性，一個元素也可以居中。

CSS

.container {
  width: 400px;
  height: 200px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  /* Key css */
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.content {
  /* Key css */
  display: inline-block;
  padding: 20px;
  border-radius: 10px;
  background-color: #e3c1a9;
  color: #ffffff;
}      

示範位址：https://codepen.io/qianlong/pen/dymzPJE

9、writing-mode

過去，我習慣使用 write-mode 将内容的布局方向更改為垂直。

但令人驚奇的是它還可以使元素居中，不過這種方法有點難了解，代碼量會比較多。

HTML代碼：

<div class="container">
  <div class="content-wrap">
    <span contenteditable="true" class="content">hello medium</span>
  </div>
</div>      

CSS代碼：

.container {
  width: 400px;
  height: 200px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  /* Key css */
  writing-mode: vertical-lr;
  text-align: center;
}
.content-wrap{
  /* Key css */
  writing-mode: horizontal-tb;
  display: inline-block;
  text-align: center;
  width: 100%;
}
.content {
  /* Key css */
  display: inline-block;
  margin: auto;
  text-align: left;
  padding: 20px;
  border-radius: 10px;
  background-color: #e3c1a9;
  color: #ffffff;
}      

示範位址：https://codepen.io/qianlong/pen/vYRJErY

10、table

最後，當然，最後一種方式是最不推薦的方式，但我提到它隻是作為學習的一個例子。我不建議你在工作中使用它，因為它（在我看來有點）很糟糕。

HTML代碼：

<table>
  <tbody>
    <tr>
      <td class="container">
        <span contenteditable="true" class="content">hello medium</span>
      </td>
    </tr>
  </tbody>
</table>      

CSS代碼：

.container {
  width: 400px;
  height: 200px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  /* Key css */
  text-align: center;
}
.content {
  /* Key css */
  display: inline-block;
  padding: 20px;
  border-radius: 10px;
  background-color: #e3c1a9;
  color: #ffffff;
}      

示範位址：https://codepen.io/qianlong/pen/yLKoyqv

寫在最後

以上就是我今天與你分享的10個關于CSS實作元素居中的小技巧，希望你能從中學到你想要的知識，如果你覺得它有用的話，請記得點贊我，關注我，并将它分享給你身邊做開發的朋友，也許能夠幫助到他。

最後感謝你的閱讀，祝程式設計愉快，我們明天見。

學習更多技能

請點選下方公衆号

​