Flex align-items: center not centering items

If you use the correct properties and give the container a height, it will work.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

  /* CSS just to show the bounds */
  border: 2px solid;
  background-color: #eee
}
<div class="container">
  <p>Lorem ipsum</p>
</div>

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>

Tags:

Html

Css

Flexbox

Recent Posts