CSS3/Flex: 实现水平垂直居中且等宽自适应居中的巧妙方法

前端

2023-10-10 08:43:00

在前端布局中，水平垂直居中是一种常见的需求，但要实现这一点往往需要巧妙的方法。本文将探讨使用 CSS3 和 Flex 布局的两种有效方法，它们可以实现元素的水平垂直居中和等宽自适应居中。

方法 1：使用 flexbox 和 margin: auto

Flexbox 是 CSS3 中强大的布局模块，它提供了灵活且易于使用的布局选项。要使用 flexbox 实现水平垂直居中，可以使用以下步骤：

将父容器设置为 flex 容器：display: flex;
在父容器上设置 justify-content: center; 和 align-items: center;，分别实现水平和垂直居中。
在子元素上设置 margin: auto;，实现等宽自适应居中。

方法 2：使用 flexbox 和 transform: translate

另一种使用 flexbox 实现水平垂直居中的方法是使用 transform: translate。此方法涉及以下步骤：

设置父容器为 flex 容器，并设置 justify-content: center;。
将子元素设置为 flex 项目，并设置 transform: translate(-50%, -50%);。

请注意，对于方法 2，您需要将子元素的位置设置为绝对或相对，以使 transform 生效。

代码示例

方法 1

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  width: 200px;
}

.item {
  margin: auto;
  width: 100px;
  height: 100px;
  background-color: red;
}

方法 2

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

.item {
  position: relative;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: blue;
}