Horizontally Center content

There are various methods to center align text as well any HTML content. Center aligning the text is pretty simple and can be done using just text-align:center property as following.

But what if when you have to center align any HTML element with any content inside it. In that case you can use any of the following method:

1. Horizontally Center content using margin : 0 auto

You can use margin : 0 auto to any parent element and than your content inside it will be horizontally center align relative to it.

Consider the below HTML structure for horizontally center align content inside a parent HTML element.

Demo codepen

2. Horizontally Center content Using Flexbox model:

Now you can center both text/ any HTML content using display:flex. Considering above HTML structure, you can center alsign HTML content as follow:

 

Demo Codepen

That’s it for this article. Please post your suggestion and comments below. Happy CSS styling guy’s… 🙂

 

Leave a Reply

Your email address will not be published. Required fields are marked *