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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐