title: Centering in CSS
date: 2018-04-19 01:29:00
tags:

• CSS
• 譯文

本文翻譯自 CSS-Tricks 中的一篇文章—— Centering in CSS: A Complete Guide，CSS居中完全指南，其中有部分刪改。

??Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know which to reach for.
??居中是一種很常見的布局方式。有人抱怨CSS居中布局很難，其實(shí)不然，在我看來，說居中布局難，不是因?yàn)榫又姓娴挠卸嗝措y實(shí)現(xiàn)，而是因?yàn)閷?shí)現(xiàn)居中的方法有太多太多，以至于新手總是糾結(jié)去用哪個(gè)。我們需要根據(jù)不同的場景，去選擇合適的方法。
??本文將CSS居中布局方法進(jìn)行歸類，以便于理解和簡化居中問題。

1.水平居中

1.1 行內(nèi)元素

行內(nèi)元素直接為其父元素設(shè)置文本居中即可。

.center-children {
  text-align: center;
}

http://codepen.io/chriscoyier/pen/HulzB

1.2 塊級元素

塊級元素直接設(shè)置左右邊距為 auto 即可，前提是該塊級元素必需有 width ，而且必需處于標(biāo)準(zhǔn)文檔流中，浮動、絕對定位、固定定位了的元素就不能。

.center-me {
  margin: 0 auto;
}

http://codepen.io/chriscoyier/pen/eszon

1.3 多個(gè)塊級元素

• 多個(gè)塊元素在一行內(nèi)居中
  • 方法一：父元素設(shè)置 text-align: center ，子元素設(shè)置 display: inline-block；
  • 方法二：使用 flex 布局，父元素設(shè)置 display: flex; justify-content: center;
    http://codepen.io/chriscoyier/pen/ebing
• 多個(gè)塊元素在一列內(nèi)居中
  如果只是需要讓多個(gè)塊級元素整體水平居中，并且按默認(rèn)的方式縱向排列，那直接設(shè)置左右邊距為 auto 即可。
  http://codepen.io/chriscoyier/pen/haCGt

2. 垂直居中

2.1 行內(nèi)元素

• 單行居中
  • 設(shè)置行高與元素的高度相同
    http://codepen.io/chriscoyier/pen/LxHmK
  • 為行內(nèi)元素/文本元素設(shè)置相等的上下內(nèi)邊距
    http://codepen.io/chriscoyier/pen/ldcwq
• 多行居中
  • 設(shè)置相等的上下內(nèi)邊距
  • vertical-align 屬性來實(shí)現(xiàn)垂直居中
    http://codepen.io/chriscoyier/pen/ekoFx
  • flexbox

  .flex-center-vertically {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 400px;
  }
  

  http://codepen.io/chriscoyier/pen/uHygv

2.2 塊級元素

• 元素高度已知

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

http://codepen.io/chriscoyier/pen/HiydJ

• 元素高度未知（最常見的一種場景）
  • 方法一：先將元素相對于其原始位置向下移動父元素高度的一半距離，再將該元素相對其本身的高度向上移動一半，這樣就能實(shí)現(xiàn)垂直居中的效果了。

  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  

  http://codepen.io/chriscoyier/pen/lpema
  • 方法二：flexbox

  .parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  

  http://codepen.io/chriscoyier/pen/FqDyi

3. 垂直和水平都居中

當(dāng)然，我們可以結(jié)合以上給出的方法來實(shí)現(xiàn)垂直和水平方向都居中的布局。這里我們再進(jìn)行一下分類總結(jié)。

3.1 寬高固定

將元素相對于其父元素的寬度/高度值向右并向下移動一半的距離，然后再通過設(shè)置負(fù)邊距值的方法，將元素相對于其自身的寬度/高度值向左并向上移動一半的距離，就可實(shí)現(xiàn)水平垂直均居中的效果了。并且這種方法的瀏覽器兼容性是很好的。

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

http://codepen.io/chriscoyier/pen/JGofm

3.2 寬高不固定

如果元素的寬度或者高度未知，則在將元素相對于父元素的寬高往向右并向下移動一半距離后，再用 transform 屬性來將其向左并向上移動自身寬度及高度值一半的距離即可。

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

http://codepen.io/chriscoyier/pen/lgFiq

3.3 使用 flexbox

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

http://codepen.io/chriscoyier/pen/msItD

3.4 使用 grid

這只是一個(gè)小技巧，只適用于一個(gè)元素的情況。
<iframe src="http://codepen.io/chriscoyier/embed/NvwpyK" width="100%" height="400" frameborder="0"></ifream>

4. 結(jié)束語

CSS 還是很偉大的，能夠?qū)崿F(xiàn)的布局多種多樣，實(shí)現(xiàn)的方法也多種多樣，重要的是找到合適的方法！這就需要多寫多練多總結(jié)！