前言

在此之前已經對布局方法和方式都做了介紹并且有對一些典型布局進行實踐：
圣杯布局和雙飛翼布局的區(qū)別與實現
傳統(tǒng)模型、Flex和Grid布局

因此，我們針對元素的居中進行不同方式的實踐

行內元素

<h1><p>行內元素居中</p></h1>
p{
  text-align: center;
}

適用于行內元素，例如文字、按鈕、圖片等，或者display屬性為行內元素的。
具體區(qū)分行內和塊級元素的方法：
塊級元素和行內元素

塊級元素

相對定位+translate

<main>
<div id="son"></div>
</main>

main{
  background-color: #f0f;
  width:200px;
  height: 200px;
}
#son{
  background-color: #f00;
  position: relative;/*設置相對定位*/
  width:50px;
  height: 50px;
  top: 50%;/*元素上方與父元素相距50%，這里的50%為父元素的高度*/
  left: 50%;
  transform: translate(-50%,-50%);/*以自身為基準往左上移動百分之50*/
}

此處最重要的理解在于top和left的50%是相對與父元素的高度和寬度，而transform: translate(-50%,-50%)則是相對于自身。

flex

<main>
<div id="son"></div>
</main>

main{
  display: flex;
  justify-content: center;
  align-items:center ;
  background-color: #f0f;
  width:200px;
  height: 200px;
}
#son{
  width:50px;
  height: 50px;
  background-color: #f00;
}

flex的方法主要在容器上，定義容器為display: flex,水平居中justify-content: center，垂直居中align-items:center

grid

<main>
<div id="son"></div>
</main>

main{
  display: grid;
  justify-items: center;
  align-items:center ;
  background-color: #f0f;
  width:200px;
  height: 200px;
}
#son{
  width:50px;
  height: 50px;
  background-color: #f00;
}

可能你會發(fā)現grid和flex的方法基本一樣，顯然是的，因為grid相對來說是二維布局，在一維的環(huán)境中與flex基本一樣。