Center an element, using Flex-box CSS


I think the best way to center an element is to use flex-box. For example, we need to center a title in a beautiful home page.

In your html

Text editor

In your css

The container parent of the item(s), must have the proporty/value, display: flex

Then there is many simple solutions to center your element:

=> Apply the solution only on the container

Text editor

=> Or apply on the item

Text editor

=> More minimalist

Text editor

Thanks to read this article, and I hope it will help some beginners like me.

Here the documentation of flex-box!