CSS页面居中

FXZOM • 2025-02-05 13:05 • 编程

一、水平居中

在实际开发中，我们经常会需要将一个元素水平居中，有如下三种方法可以实现。

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

在父元素中设置text-align:center，在子元素中设置display:inline-block，即可使子元素水平居中。

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

这种方法需要将子元素设置为绝对定位，然后通过将左边距设置为50%，再通过transform属性向左移动自身宽度一半的距离，使子元素水平居中。

.parent {
  display: flex;
  justify-content: center;
}
.child {
  /* 可以省略 */
}

使用flex布局，将父元素设为flex容器，设置justify-content属性为center即可使子元素水平居中。

同样地，我们也需要将一个元素垂直居中，有如下三种方法可以实现。

.parent {
  height: 200px;
  line-height: 200px;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

在父元素中设置height和line-height为相同的值，再将子元素设置为inline-block，然后通过vertical-align属性设置为middle，即可使子元素垂直居中。

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

同样也需要将子元素设置为绝对定位，将上边距设置为50%，再通过transform属性向上移动自身高度一半的距离，使子元素垂直居中。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  /* 可以省略 */
}

使用flex布局，将父元素设为flex容器，设置align-items属性为center即可使子元素垂直居中。

如果想要将一个元素水平垂直居中，可以结合以上方法进行实现。

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

将子元素设置为绝对定位，将左边距和上边距分别设置为50%，再通过transform属性向上和向左移动自身宽高的一半距离，即可使子元素水平垂直居中。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  /* 可以省略 */
}

设置父元素为flex容器，同时将justify-content和align-items属性都设置为center，即可实现水平垂直居中。

原创文章，作者：FXZOM，如若转载，请注明出处：https://www.506064.com/n/335048.html