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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> .myDiv{ width: 190px; padding: 10px; background: #f99f53; text-align: center; margin: 0 auto; border: 1px solid #f97200; color: #fff; } </style> <div class="myDiv"> This is the div element. </div> |
Output
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
- How to Center Align Image inside Div Using HTML and CSS
- Center Align Unordered List inside Div Using CSS
- How to Align Text Vertically Center Using CSS
I hope you like this tutorial on how to make div elements in the middle using CSS.