html – Flex align-items: center not centering items

html – Flex align-items: center not centering items

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

n

n

n

.container {n  display: flex;n  justify-content: center;n  align-items: center;n  height: 100vh;nn  /* CSS just to show the bounds */n  border: 2px solid;n  background-color: #eeen}

n

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

n

n

In the given link, align-self property is used instead of align-items.nIf you keep align-items and apply a height to the container you can see it working. Pen

html – Flex align-items: center not centering items

Leave a Reply

Your email address will not be published.