如何在CSS中实现居中对齐元素_使用Flexbox justify-content和align-items

使用Flexbox居中需先设置父元素display: flex；2. justify-content: center实现水平居中；3. align-items: center实现垂直居中；4. 同时使用两者可实现完全居中，配合容器高度即可精确居中子元素。

在CSS中使用Flexbox实现元素居中对齐，是最常用且高效的方法之一。通过设置容器的 justify-content 和 align-items 属性，可以轻松实现水平、垂直或完全居中。

1. 设置Flex容器

要使用Flexbox进行居中，首先需要将父元素定义为Flex容器。

将父元素的 display 属性设为 flex：

• display: flex; —— 启用Flex布局

2. 水平居中：justify-content

该属性控制主轴（默认为水平方向）上的对齐方式。

让子元素在主轴上居中：

• justify-content: center; —— 子元素在容器中水平居中

3. 垂直居中：align-items

该属性控制交叉轴（默认为垂直方向）上的对齐方式。

让子元素在交叉轴上居中：

• align-items: center; —— 子元素在容器中垂直居中

4. 完全居中：同时使用两个属性

当需要将一个块级元素在父容器中完全居中（既水平又垂直），只需同时设置两个属性。

CSS 示例：

.container {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
  height: 100vh;            /* 确保容器有高度 */
}

这样，任何子元素都会在容器中精确居中，无论其尺寸如何。

基本上就这些。只要记住：justify-content 控制横向，align-items 控制纵向，搭配 flex 布局，居中变得非常简单。