Javascript 如何使用样式化组件在按钮组件中居中显示文本？

我使用下面的样式化组件制作了一个按钮组件。 我在另一个组件中使用这个按钮组件，甚至为按钮组件制作了一个父组件，希望如果父组件具有“文本对齐：中心”属性，它会将我的按钮中的文本居中，结果不是。。。也许我做得不对

下面是我的Button.js代码

import React from "react";
import styled, { css } from "styled-components";

const Container = styled.div`
  text-align: center;
`;

const colorStyles = css`
  ${(props) =>
    props.color === "blue" &&
    css`
      background: #588ced;
      color: #ffffff;

      &:hover {
        background: #3866bc;
      }
    `}

  ${(props) =>
    props.color === "gray" &&
    css`
      background: #eeeef2;
      color: #65636a;

      &:hover {
        background: #dbdadf;
      }
    `}
`;

const sizeStyles = css`
  ${(props) =>
    props.size === "normal" &&
    css`
      width: 181px;
      height: 48px;
    `}

  ${(props) =>
    props.size === "small" &&
    css`
      width: 100px;
      height: 40px;
    `}
`;

const shapeStyles = css`
  ${(props) =>
    props.shape === "round" &&
    css`
      border-radius: 50px;
    `}

  ${(props) =>
    props.shape === "squared" &&
    css`
      border-radius: 10px;
    `}
`;

const StyledButton = styled.button`
  /* common styles */
  display: flex;
  outline: none;
  border: none;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 19px;
  cursor: pointer;
  align-items: center;
  text-align: center;

  /* sizes */
  ${sizeStyles}

  /* colors */
  ${colorStyles}

  /* shapes */
  ${shapeStyles}

  /* etc */
  // & + & {
  //   margin-left: 1rem;
  // }
`;

function Button({ children, color, size, shape, ...rest }) {
  return (
    <Container>
      <div>
        <StyledButton color={color} size={size} shape={shape} {...rest}>
          {children}
        </StyledButton>
      </div>
    </Container>
  );
}

export default Button;

这就是我的纽扣现在的样子。在使用文本对齐和对齐项目属性之前，文本位于按钮的左上方。有没有办法将按钮中的文本居中

我想知道右边的紫色方框是否与文本居中有关

---

提前非常感谢您阅读并友好地回答我的问题。：）

只需添加：

justify content:center

为了使方框居中，我们使用
align items
属性在横轴上对齐项目，在本例中，横轴是垂直运行的块轴。我们使用
justify content
在主轴上对齐项目，在本例中，主轴是水平运行的内联轴

演示

按钮{
显示器：flex；
大纲：无；
边界：无；
字体系列：Roboto；
字体风格：普通；
字体大小：粗体；
字体大小：16px；
线高：19px；
光标：指针；
对齐项目：居中；
文本对齐：居中；
边界半径：50px；
背景：ɌCED；
颜色：#ffffff；
宽度：189px；
高度：48px；
}
按钮
按钮
请添加沙盒（codesandbox等），特别是在CSS问题中。我试着证明内容的合理性：中心；但在另一部分。。。再次感谢大家！
import styles from "./Page.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Button from "../button/Button";

export default function Page({ data, setModalVisibleState }) {
  const addButtonHandler = () => {
    setModalVisibleState(true);
  };

  return (
    <div className={styles.container}>
      <div className={styles.titleBox}>
        <FontAwesomeIcon icon={faGraduationCap} />
        <p>{data.title}</p>
        <div className={styles.buttonWrap}>
          <Button size="normal" shape="squared" color="blue" onClick={addButtonHandler}>{data.button}</Button>
        </div>
      </div>
//...and more...

.buttonWrap {
    display: flex;
    text-align: center;
    align-items: center;
}