react 里面的东西居中

import React from 'react';
import './CenteredComponent.css';


const CenteredComponent = (props) => {
  return (
    <div className="centered-component">
      {props.children}
    </div>
  );
};

export default CenteredComponent;

.centered-component {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 使用视窗高度作为容器高度，实现上下居中 */
    width: 100%; /* 使用视窗宽度作为容器宽度，实现左右居中 */
  }
  

<CenteredComponent>
       <div>
        我被居中了
      </div>
    </CenteredComponent>