Why Align Items Center Not Working

Flex align-items: center not centering items

In the code snippet below, align-self property is used instead of align-items. If you keep align-items and apply a height to the container you can see it working. CODEPEN

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: #ff0;
}

<div class="container">
  <p>Lorem ipsum</p>
</div>

Why align items center not working?

First align the content of warp div and not the warp div

.row{
  display: flex;
  justify-content: center;
  align-items: center;
}

or try align-items with setting width

The property align-items center doesn't work with tag nav

Serj1c is right about the flex-direction.

If you want your align-items: center to work, please make sure that the li height and width are not 100%.

Text-align: center and align-items: center not working horizontally

You can use this solution using flexbox.

What was changed?

Added flex-direction: column to .boxes to define how the flex items (<p> element) are placed in the flex container (.boxes).
Added align-items: center to center the flex items along the horizontal axis.
Added justify-content: center to center the flex items (<p> element) on the vertical axis.

* { 
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%; 
}

.boxes {
  height: 100%;
}
.box {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 20%;
  justify-content: center;
  width: 33%;
}
.box1 {
  background: magenta; 
}
.box2 { 
  background: cyan;
}
.box3 {
  background: yellow;
}
.box4 {
  background: orange;
}
.box5 { 
  background: purple;
}

<div class="boxes">
  <div class="box box1"><p>Box 1</p></div>
  <div class="box box2"><p>Box 2</p></div>
  <div class="box box3"><p>Box 3</p></div>
  <div class="box box4"><p>Box 4</p></div>
  <div class="box box5"><p>Box 5</p></div>
</div>

Cannot align items to centre of page in bootstrap 5

you need to specify the height of your container, vertical alignment will not work without a height. You need to add vh-100 for element.

<!DOCTYPE html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container vh-100 d-flex justify-content-center align-items-center">
        elment goes here
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>