bootstrap 将项目放在中间

Question

我在 reactjs 中使用 bootstrap 并试图在屏幕中间放置一个文本，但它不起作用。你能告诉我我做错了什么吗？

<div className="h-100 d-flex align-self-center justify-content-center">
     <div className="alert alert-danger">I SHOULD BE CENTER</div>
</div>

谁能帮我解决为什么它不起作用？

我试过 align-items-cente 和 align-self-center，但都不行

Answer 1

您可以添加 align-items-center。如果我没记错的话，您可能需要在 CSS.

中使用 flex-direction: column

Answer 2

应该是align-items-center而不是align-self-center

<div className="h-100 d-flex align-items-center justify-content-center">
     <div className="alert alert-danger">I SHOULD BE CENTER</div>
</div>

Answer 3

给你...

正如@James 已经建议的那样，您应该将 align-self-center 更改为 align-items-center，但这还不够。您还需要对代码进行一些更改。

<body className="vh-100 d-flex justify-content-center align-items-center">
  <div className="container-fluid vh-100 d-flex justify-content-center align-items-center">
    <div className="alert alert-danger">I AM CENTERED</div>
  </div>
</body>

body {
  background-color: yellow !important;
}

bootstrap 将项目放在中间

bootstrap placing item in middle

css

reactjs

bootstrap-4

bootstrap-5