为什么我的登录块不会在reactjs中居中？

如何解决为什么我的登录块不会在reactjs中居中？

我正在尝试使此块居中。这是我的代码：

这是CSS：

.login__body { 
    display: block; 
    text-align: center; 
    border: 1px solid lightgrey; 
    width: 400px; 
    height: 600px; 
}    

代码如下：

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

function LoginBody() {
    return (
        <div>
            <div className="login__body">
                <h1>Hello</h1>
            </div>
        </div>
    );
}
    
export default LoginBody;

解决方法

您可以使用display: flex将元素置于其父元素的中心！

function LoginBody() {
    return (
        <div className="login_container">
            <div className="login__body">
                <h1>Hello</h1>
            </div>
        </div>
    );
}

以及此处的css文件

.login {
  width: 100%;
  height: 100vh;
  position: relative;

  &__container {
   
    display: flex;
    justify-content: 'center';
    align-items: 'center'
  
  }

  &__body {
    // ...
  }
}

执行此操作，您的.login__container元素将占据整个页面，并将其子级（.login__body）居中放置在水平和垂直位置。您可以找到flex属性here的文档详细信息；另外here是关于CSS技巧中的flex的更具描述性和简便性的文章