Centering Elements With CSS

To make our website look responsive and beautiful center elements is the best technique that works here. There are different ways to center the elements on our web pages. By default HTML5 also provides us Centre tag ( <center></center> ) to Centre the contents of our page.
We can also Centre the elements on a webpage using JavaScript snippets. If we take CSS into action then CSS also provides us center elements on our webpage using flex property.
There are multiple ways to Centre an element on our web page but flex property is the best one which allows us to Centre the contents of an element on which this property is applied.

Code Snippet:

This is a tiny CSS code snippet that allows you to send the contents of an element on your web pages. I am going to use a wrapper as a class name for the element on which we want to apply this flex property to Centre the element contents.

.wrapper{
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

Example Usage:

<div class='wrapper'>
    <p>This is the child of element whose contents will be centered using flex property</p>
</div>

In the sample usage code above the div element with the class name wrapper is the parent element which is having the flex property and its contents, the element inside it will be automatically centered as we have defined that in the above CSS code.

Wrap Up:

That's all about center elements using CSS. It's one of the best techniques to Centre the elements on web pages without any hassle. You should also use the flex technique to Centre the elements using CSS on your web pages and avoid using JavaScript snippets because of JavaScript effects your web pages, not always but sometimes.