Flex 布局中的垂直和水平居中：全面指南

2024-02-10 18:17:25

使用 flex 布局在网页设计中对元素进行对齐和定位是一项必备技能。其中，实现垂直和水平居中是 flex 布局中最常见的问题之一。

在本全面指南中，我们将深入探讨 flex 布局中垂直和水平居中的原理，并提供逐步的示例和代码片段，以帮助您轻松掌握这些技巧。

垂直居中

垂直居中是指将元素垂直对齐到其父元素的中心。在 flex 布局中，可以通过设置 align-items 属性来实现。

单行内容的垂直居中

对于单行内容，可以使用 align-items: center 属性将元素垂直居中到父元素：

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

多行内容的垂直居中

对于多行内容，需要使用 justify-content 属性来控制元素的水平对齐。将 justify-content 设置为 center 可将元素水平居中到父元素，再配合 align-items: center 实现垂直居中：

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

水平居中

水平居中是指将元素水平对齐到其父元素的中心。在 flex 布局中，可以通过设置 justify-content 属性来实现。

单行内容的水平居中

对于单行内容，可以使用 justify-content: center 属性将元素水平居中到父元素：

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

多行内容的水平居中

对于多行内容，需要使用 align-items 属性来控制元素的垂直对齐。将 align-items 设置为 center 可将元素垂直居中到父元素，再配合 justify-content: center 实现水平居中：

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

实际应用示例

假设我们有一个带有头像和右侧内容的对话框。我们希望在单行内容时垂直居中，在多行内容时居上对齐。

<div class="dialog">
  <div class="avatar">
    <img src="avatar.jpg" alt="Avatar">
  </div>
  <div class="content">
    <h1>标题</h1>
    <p>内容</p>
  </div>
</div>

.dialog {
  display: flex;
  align-items: center;
}

.content {
  flex: 1;
  margin-left: 10px;
}

@media (max-width: 768px) {
  .dialog {
    flex-direction: column;
    align-items: flex-start;
  }

  .content {
    margin-top: 10px;
  }
}