React项目中Task组件内部元素无法居中的CSS问题求助

我刚开始学习CSS，在React项目中尝试让Task组件内的元素居中。为调试我给.task类添加了绿色边框，发现容器是居中的，但内部的文本和按钮元素并未居中。

相关代码 #

CSS代码 #

.App {
  display: block;
  text-align: center;
  align-items: center;
}

.done {
  color: red;
}

.task {
  text-align: center;
  align-items: center;
  display: flex;
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

Task组件代码 #

import React, { Component } from "react";

class Task extends Component {

    render() {
        return (
            <div className={`task ${this.getClass()}`}>
                <div>{this.props.task.text}</div>

                <button className="task-element" onClick={() => this.props.onDone(this.props.task.id)}>
                    <span className="material-symbols-outlined">check_box</span>
                </button>

                <button className="task-element" onClick={() => this.props.onDelete(this.props.task.id)}>
                    <span className="material-symbols-outlined">
                        delete
                    </span>
                </button>
            </div>
        );
    }

    getClass() {
        return this.props.task.isDone ? 'done' : 'notDone';
    }
}

export default Task;

解决方案 #

问题出在.task的flex布局配置上：你已经设置了align-items: center（控制垂直方向居中），但缺少主轴（水平方向）的居中配置。

修改.task的CSS，添加justify-content: center属性：

.task {
  text-align: center;
  align-items: center;
  /* 新增：让flex容器内元素水平居中 */
  justify-content: center;
  display: flex;
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

另外，.App中的align-items: center是无效的，因为display: block不支持flex布局的相关属性，可以直接删除这一行。

原理说明 #

flex布局中：

• align-items: center：控制**交叉轴（默认垂直方向）**上的元素对齐方式
• justify-content: center：控制**主轴（默认水平方向）**上的元素对齐方式
  两者配合才能让容器内的元素在水平和垂直方向都居中。

内容的提问来源于stack exchange，提问作者Filipe Nogueira