如何在CSS中水平垂直居中元素（包括浮动元素）？

2023-10-06 07:44:24

如何使用 CSS 在有限的高度和宽度内将元素水平垂直居中？

在 Web 开发中，经常需要在有限的空间内对元素进行居中对齐。无论是水平还是垂直居中，在 CSS 中都有多种方法可以实现。本文将深入探讨这些方法，并提供详细的代码示例。

水平居中

水平居中指将元素水平方向上置于其容器的中心位置。有两种主要方法可以实现水平居中：

1. 文本居中法

对于文本元素，可以使用 text-align 属性将文本水平居中。

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

2. margin 居中法

对于块级元素，可以使用 margin 属性将元素水平居中。

.margin-center {
  margin: 0 auto;
}

垂直居中

垂直居中指将元素垂直方向上置于其容器的中心位置。对于垂直居中，有两种主要方法：

1. line-height 法

对于单行文本，可以通过设置 line-height 属性等于元素的高度来垂直居中。

.line-height-center {
  line-height: 100px;
}

2. inline-block + 伪元素填充法

对于多行文本或非文本元素，可以使用 display: inline-block 结合伪元素来垂直居中。

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

.inline-block-center::before,
.inline-block-center::after {
  content: "";
  display: inline-block;
  width: 50%;
  height: 100%;
}

水平居中兼容浮动元素

浮动元素在水平方向上脱离了文档流，因此需要特殊处理才能实现水平居中。有两种方法可以实现浮动元素的水平居中：

1. flexbox 布局

flexbox 布局使用 display: flex 属性和 justify-content: center 属性来水平居中浮动元素。

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-item {
  float: left;
}

2. 绝对定位

绝对定位使用 position: absolute 属性和 transform: translate(-50%, -50%) 变换来水平居中浮动元素。

.absolute-container {
  position: relative;
  width: 100%;
  height: 100%;
}

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