如何在没有 Flex 的情况下使项目居中 - CSS

在CSS中，使用Flex属性非常便捷地将项目（元素）居中。但是在一些老旧的项目中，我们可能无法使用Flex，那么如何在没有Flex的情况下使项目居中呢？下面介绍几种解决办法。

水平居中

文字类元素

对于文字类元素，可以使用text-align属性将其水平居中。例如：

div {
  text-align: center;
}

此时div内的文字将会水平居中。

块级元素

对于块级元素，可以将其设置display为inline-block，并设置其父级元素的text-align为center。例如：

.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

此时child元素将会水平居中。

绝对定位元素

对于绝对定位元素，可以将其左右两侧都设置为0，并设置margin为auto。例如：

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

此时child元素将会水平居中。

垂直居中

单行文字

对于只有单行文字的元素，可以将其设置为相对定位，并设置top属性为50%，再设置其自身高度的一半的负值作为margin-top。例如：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  margin-top: -10px /* 假设其高度为20px */;
}

此时child元素将会垂直居中。

多行文字

对于多行文字的元素，可以将其设置为相对定位，并设置top和transform属性。例如：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

此时child元素将会垂直居中。

块级元素

对于块级元素，可以将其设置为table-cell，并将其父级元素设置为table以及vertical-align属性为middle。例如：

.parent {
  display: table;
  height: 100%;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

此时child元素将会垂直居中。

以上便是在没有Flex的情况下，使项目居中的几种方法。这些方法可以为一些老旧的项目提供居中解决方案。