How to Center Align Div Element Horizontally Using CSS

In this tutorial, learn how to center align div element horizontally using CSS. The short answer is: apply the CSS margin:0 auto to the div element which you want to make center align. In addition to this, also apply the width to the div element.

The div element can contain many other contents with HTML tags. You have to use the CSS margin left with value auto and CSS margin right with value auto to make the div centrally aligned.

You can also use other CSS properties to make div internal content center aligned, bordered and background. These CSS creates a div element which can easily identify as centrally aligned and with some fixed width.

How to Center Align Div Element Horizontally with CSS

To perform this task, you have to add a CSS class the div element you want centrally aligned. Now, add the CSS margin property and other CSS for the look and feel of the div element.


This is the div element.

The above example contains a div which is centrally aligned with the width of 190px. Inside the div element, there is only a single line text which you can also make centrally aligned using the CSS text-align property.

The margin CSS property only center align the div element and there is no effect of this property to the internal content of div.

Hope, you like the tutorial. If you have any query regarding this tutorial, you can comment below. Also tell me, which method are you using to center align div element Horizontally.


Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.

Get the PDF

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Download Link Will be Send to Your Email id