bootstrap placing item in middle-CodePudding

I am usign bootstrap in reactjs and trying to put a text in the middle of the screen but it doesn't work. can you please tell me what wrong i have done ?

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

can anyone help me why it is not working?

I have tried with both align-items-cente and align-self-center, and it doesnt work

CodePudding user response：

Here you go...

As @James already suggested, you should change align-self-center to align-items-center, but this is not enough. You also need to make some changes to your code.

<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;
}

CodePudding user response：

Should be align-items-center instead of 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>

CodePudding user response：

You can add align-items-center. If I remember correctly you may need to make use of flex-direction: column in your CSS.