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>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐