react中的居中组件

import React from 'react';

const CenteredComponent = () => {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      {/* 子组件内容 */}
    </div>
  );
};

export default CenteredComponent;

import React from 'react';

const CenteredComponent = () => {
  return (
    <div style={{ position: 'relative', height: '100vh' }}>
      <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}>
        {/* 子组件内容 */}
      </div>
    </div>
  );
};

export default CenteredComponent;

import React from 'react';

const CenteredComponent = () => {
  return (
    <div style={{ display: 'grid', placeItems: 'center', height: '100vh' }}>
      {/* 子组件内容 */}
    </div>
  );
};

export default CenteredComponent;