Reactjs -如何在视口中心显示栅格

import React, { Component } from 'react';
import './Grid.css'; // 导入栅格的样式文件

class Grid extends Component {
  constructor(props) {
    super(props);
    this.state = {
      gridWidth: 0,
      gridHeight: 0,
    };
  }

  componentDidMount() {
    // 在组件挂载后获取视口的宽度和高度
    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
    
    // 计算栅格的位置坐标
    const gridWidth = this.props.gridWidth;
    const gridHeight = this.props.gridHeight;
    const left = (viewportWidth - gridWidth) / 2;
    const top = (viewportHeight - gridHeight) / 2;
    
    // 更新栅格的位置
    this.setState({
      gridWidth,
      gridHeight,
      left,
      top,
    });
  }

  render() {
    const { gridWidth, gridHeight, left, top } = this.state;
    
    // 根据计算得到的位置坐标设置栅格的样式
    const gridStyle = {
      width: gridWidth,
      height: gridHeight,
      left,
      top,
    };
    
    return (
      <div className="grid" style={gridStyle}></div>
    );
  }
}

export default Grid;