How to Center Align Div Element Horizontally Using CSS

Last Updated on February 12, 2021 by Roshan Parihar

In this tutorial, learn how to center align div element horizontally using CSS. The short answer is: apply a width and the CSS ‘margin:0 auto‘ to the <div> element to make center align.

Let’s find out with the examples given below.

How to Center Align Div Element Horizontally with CSS

To center align div element horizontally, you need to define a CSS width to the <div> element with content added inside it. After that, you have to apply CSS property margin: 0 auto; to the <div> element to make it align to the center position as given below:

Output

This is the div element.

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

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

You May Also Like to Read

I hope you like this tutorial on how to make div elements in the middle using CSS.