使用CSS将内容居中的4种方法

使用CSS将内容居中的4种方法，主要用到的属性为Flexbox，Grid，Transform，Table，这些属性可以将内容很快进行居中。

使用方法

Flexbox

使用 flexbox 垂直和水平居中内容通常是首选方法。只需要在容器元素中使用三行代码来设置display: flex子元素，然后分别使用align-items: center和将子元素垂直和水平居中justify-content: center。

例子：

HTML代码

<div class="flexbox-centering">
  <div>Centered content.</div>
</div>

CSS代码

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

效果

Grid

使用 grid 模块与 flexbox 非常相似，也是一种常用技术，特别是如果您已经在布局中使用了 grid。与先前技术的唯一区别是将display设置为grid替代。

例子：

HTML代码

<div class="grid-centering">
  <div class="child">Centered content.</div>
</div>

CSS代码

.grid-centering {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100px;
}

效果

Transform

变换居中使用，顾名思义，CSS 变换使元素居中。它取决于具有 的容器元素position: relative，允许子元素利用position: absolute来定位自身。然后left: 50%和top: 50%用于偏移子元素和transform: translate(-50%, -50%)否定其位置。

例子：

HTML代码

<div class="parent">
  <div class="child">Centered content</div>
</div>

CSS代码

.parent {
  border: 1px solid #9C27B0;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

效果

Table

最后但并非最不重要的一点是，表格居中是一种较旧的技术，在使用较旧的浏览器时您可能会喜欢它。这取决于在display: table容器元素中的使用。这允许子元素display: table-cell与水平和垂直方向结合使用text-align: center和vertical-align: middle居中。

例子：

HTML代码

<div class="container">
  <div class="center"><span>Centered content</span></div>
</div>

CSS代码

.container {
  border: 1px solid #9C27B0;
  height: 250px;
  width: 250px;
}

.center {
  display: table;
  height: 100%;
  width: 100%;
}

.center > span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

效果