【第1期】聊聊css居中那点事

前言：居中是网页布局中再常见不过的一种方式了，今天咱们就来聊聊css居中的那点事。

咱们主要从这几个方面来了解下居中：

• 水平居中
• 垂直居中
• 水平垂直居中

水平居中

水平居中又分为：

• 文字水平居中
• 图片水平居中
• 已知元素宽度的水平居中
• 未知元素宽度的水平居中

文字水平居中

实现文字的水平居中，是最为简单的了，加上text-align: center;便可，看如下代码：

<p class="text-center">
  文字水平居中
</p>

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

注意：父元素必须是 块级元素，即display: block;至于什么是 块级元素，不在本文讨论的范围

图片水平居中

图片水平居中跟文字同样，也是使用text-align: center;

非图片文本元素，已知宽度的水平居中

方法一：margin: 0 auto;

好比div元素，假设咱们已经知道它的宽度是300px,这时候咱们就能够这样设置,加上margin: 0 auto;这句代码。

<div class="div1">
  我是水平居中的div
</div>

.div1 {
  width: 300px;
  margin: 0 auto;
}

一样是针对块级元素才有效果。

方法二：绝对定位+负边距

<div class="parent3">
  <div class="child3"></div>
</div>

.parent3 {
  position: relative;
}

.child3 {
  position: absolute;
  left: 50%;
  width: 300px;
  margin-left: -150px;  // 宽度的一半
}

非图片文本元素，未知宽度的水平居中

方法一：使用text-align: center + inline-block

我以为比较简单的方法就是给父元素设置text-align: center;给子元素添加display: inline-block;这样就好了，仍是来看代码比较直接。

<div class="parent">
  <div class="child">未知元素宽度</div>
</div>

.parent {
  text-align: center;
}

.child {
  display: inline-block;
  padding: 20px;
  background: red;
}

方法二：使用绝对定位 + transform: translate()

父元素设置相对定位position: relative;;子元素设置绝对定位position: absolute加transform。看如下例子：

<div class="parent">
  <div class="child">我是水平居中的div</div>
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  padding: 20px;
  background: red;
}

注意：为了更好的兼容性，transform须要加上不一样浏览器的前缀。

方法三：使用浮动

仍是来看具体的代码：

<div class="parent2">
  <div class="child2">我是水平居中的div</div>
</div>

.parent2 {
  position: relative;
  float: left;
  left: 50%;
}

.child2 {
  position: relative;
  right: 50%;
  padding: 20px;
  background: red;
}

方法四：flex实现水平居中

<div class="parent4">
  <div class="child4">我是水平居中的div</div>
</div>

.parent4 {
  position: relative;
  display: flex;
  justify-content: center;
}

.child4 {
  padding: 20px;
  background: red;
}

注意：flex有兼容性问题，关于flex的兼容性写法，你们能够自行百度下，也能够在 caniuse查看浏览器的兼容状况

方法五：fit-content属性

“fit-content”是CSS中给“width”属性新加的一个属性值，他配合margin可让我轻松的实现水平居中的效果。这个方法也是我第一次用到，后期有时间再来仔细研究学习下。

来看代码：

<div class="fitContentDiv">
  我是水平居中的div
</div>

.fitContentDiv {
  width: fit-content;
  margin: 0 auto;
  height: 100px;
  background: red;
  padding: 20px;
}

必须配合margin: 0 auto;来使用来能够实现居中的效果。

注意：一样是存在浏览器的兼容性问题。

垂直居中

• 文字的垂直居中
• 图片的垂直居中
• 已知元素高度的垂直居中
• 未知元素高度的垂直居中

文字的垂直居中

方法一：height=line-height

这个比较简单，只须要设置高度height和行高line-height相等便可。看代码：

<p class="txt1">
  我是垂直居中的文字
</p>

.txt1 {
  height: 100px;
  line-height: 100px;
  background: red;
}

注意：这个方法有个很差的地方就是只能是针对单行的文字，多行就不适合用。

方法二：使用padding

咱们设置padding-top和padding-bottom相等就能够了，并且此方法针对多行文字也没问题。看代码：

<p class="txt2">
  我是垂直居中的文字
</p>

.txt2 {
  padding-top: 20px;
  padding-bottom: 20px;
  background: red;
}

注意：这种方法也是有一个明显的缺陷，就是你不能给文本的父元素设置高度。

方法三：table+table-cell

此方法是利用表格单元格的特性，咱们直接看代码：

<div class="parent6">
  <div class="child6">我是垂直居中的文字（这里面也能够放图片）</div>
</div>

.parent6 {
  display: table;
  width: 300px;
  height: 300px;
  background: blue;
}

.child6 {
  display: table-cell;
  vertical-align: middle;
}

此方法对图片一样有效，并且文本也能够多行，是一种不错的方法。

图片的垂直居中

使用vertical-align: middle，直接看代码：

<p class="img-va-center">
  <img src="https://via.placeholder.com/150" alt="">
</p>

.img-va-center {
  height: 300px;
  line-height: 300px;
  background: red;
}

.img-va-center img {
  display: inline-block;
  vertical-align: middle;
}

已知元素高度的垂直居中

方法一：绝对定位+负边距

看代码：

<div class="parent6">
  <div class="child6">我是垂直居中的div</div>
</div>

.parent6 {
  position: relative;
  height: 300px;
  background: red;
}

.child6 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  background: gray;
}

未知元素高度的垂直居中

方法一：绝对定位+transform

直接上代码了：

<div class="parent7">
  <div class="child7">我是垂直居中的div</div>
</div>

.parent7 {
  position: relative;
  width: 300px;
  height: 300px;
  background: red;
}

.child7 {
  position: absolute;
  top: 50%;
  width: 50px;
  padding: 10px;
  background: gray;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

注意：一样须要考虑 transform的兼容性问题。

方法二：flex+margin

<div class="parent8">
  <div class="child8">我是垂直居中的div</div>
</div>

.parent8 {
  display: flex;
  width: 300px;
  height: 300px;
  background: blue;
}

.child8 {
  margin: auto;
  padding: 20px;
  background: gray;
}

注意：此方法要考虑flex的兼容性问题。

方法三：flex+align-items

<div class="parent9">
  <div class="child9">我是垂直居中的div</div>
</div>

.parent9 {
  display: flex;
  align-items: center;
  width: 300px;
  height: 300px;
  background: blue;
}

.child9 {
  padding: 20px;
  background: gray;
}

注意：此方法要考虑flex的兼容性问题。

水平垂直居中

水平垂直居中就是把水平居中跟垂直居中的方法结合起来使用啦，这里就再也不举例了。

总结

这里虽然列举了那么多例子，可是方法终归是死的，业务需求是变化无穷的，具体仍是要根据咱们项目的业务需求来搭配使用。css很强大，要实现同一个功能，能够有不少种方法，并不仅有我列举的这些，关键是要找到适合业务需求的方法，若是你有更好的方法，欢迎留言讨论，你们一块儿学习进步！