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

Question

我正试图把这个块放到中心。这是我的代码：

这是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;

Answer 1

您可以使用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属性的文档详细信息；这里还有一篇关于css技巧中flex的更具描述性和更简单的文章