【第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: absolutetransform。看以下例子:

<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-toppadding-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很强大,要实现同一个功能,可以有很多种方法,并不只有我列举的这些,关键是要找到适合业务需求的方法,如果你有更好的方法,欢迎留言讨论,大家一起学习进步!

相关推荐