css居中案例

前言

在此之前已经对布局方法和方式都做了介绍并且有对一些典型布局进行实践：
圣杯布局和双飞翼布局的区别与实现
传统模型、Flex和Grid布局

因此，我们针对元素的居中进行不同方式的实践

---

行内元素

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

适用于行内元素，例如文字、按钮、图片等，或者display属性为行内元素的。
具体区分行内和块级元素的方法：
块级元素和行内元素

块级元素

相对定位+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;
}

可能你会发现grid和flex的方法基本一样，显然是的，因为grid相对来说是二维布局，在一维的环境中与flex基本一样。