ReactJS中登录区块无法居中的技术问题咨询

嘿，我来帮你分析一下问题所在：你当前的CSS里text-align: center只是让.login__body内部的文本/行内元素居中（比如那个<h1>Hello</h1>），但并没有让.login__body这个容器本身在页面中居中。块级元素在设置了固定宽度后，默认会靠左对齐，所以你看不到整体居中的效果。

下面给你两种常用的解决方案，任选其一就行：

方案1：使用margin: 0 auto实现水平居中 #

这种方法适合只需要水平居中的场景，我们只需要给.login__body添加自动左右外边距，同时确保父容器（比如body）占满页面宽度：

修改你的CSS：

/* 先重置body默认的内外边距，避免影响布局 */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
}

.login__body {
  display: block;
  text-align: center;
  border: 1px solid lightgrey;
  width: 400px;
  height: 600px;
  /* 添加这一行，实现水平居中 */
  margin: 0 auto;
}

方案2：使用Flexbox实现水平+垂直居中 #

如果你想让登录区块同时在页面水平和垂直方向都居中，Flexbox是更灵活的选择：

首先修改React代码，给外层div添加一个类名：

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

function LoginBody() {
  return (
    <div className="login__container"> {/* 添加这个类 */}
      <div className="login__body">
        <h1>Hello</h1>
      </div>
    </div>
  );
}

export default LoginBody;

然后在CSS里添加Flex布局样式：

/* 让外层容器占满整个视口高度，并启用Flex布局 */
.login__container {
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center; /* 垂直方向居中 */
  min-height: 100vh; /* 占满浏览器视口的高度 */
  margin: 0;
  padding: 0;
}

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

这样修改后，你的登录区块就能按照预期居中啦～

内容的提问来源于stack exchange，提问作者user13695798