We can center any CSS element easily by using flex property. It was very hard to align items before the invention of CSS flex property. In 2022, you can center an item horizontally with just 2 lines of code by converting the item into a flex.
Example 1: Horizontally Center a Div Element
Here, the main div element with the class name “flex” is centered both horizontally and vertically. So, their child elements will also be centered automatically.
HTML
|
1 2 3 4 5 6 7 |
<div class="flex"> <div class="item1">flex-item-1</div> <div class="item2">flex-item-2</div> <div class="item3">flex-item-3</div> </div> |
CSS
|
1 2 3 4 5 6 7 8 |
.flex { display: flex; flex-direction: column; /* optional, used to align the child elements */ justify-content: center; /* horizontal center */ align-items: center; /* vertical center */ } |
Example 2: Center Any Inline Element
It is easy to center a block-level element, but inline elements are very hard to center as we don’t know how much space they occupy and what their width is. So, we should convert an inline element into a block element and set the text-align property to center.
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Center an Element</title> </head> <body> <a href="https://www.techieheap.com">Techie Heap</a> </body> </html> |
CSS
|
1 2 3 4 5 6 |
a { display: block; text-align: center; } |
Example 3: Center An Inline Element Using Auto Margin Property
If you know the width of the element, or if you have no problems in setting the width of the inline element, you can center it by setting a custom width and adjusting the margin property.
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Center an Element</title> <link rel="stylesheet" href="/style.css"> </head> <body> <span class="center">Techie Heap</span> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 |
.center { width: 100%; /* you can set any width like width=300px*/ display: block; text-align: center; /* for centering the text in the allocated width */ margin-inline: auto; } |
Example 4: Center Div Element Using Auto Margin Property
We can center a div element by changing the margin property. The div element is a block-level element and so it is easy to center it horizontally.
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Center an Element</title> <link rel="stylesheet" href="/style.css"> </head> <body> <div class="container"> <div class="item"></div> </div> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 |
.container { width: 500px; margin: 0 auto; } .item { width: 50px; margin: 0 auto; } |
Conclusion
I suggest you use flex property for centering any div element. For inline elements, you can use any of the above two methods.
