
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.
Post a comment
Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.