How to horizontally center a div using CSS?
In this article, we will know how to how to center the div horizontally using CSS.
To Horizontally centered the <div> element:
- We can use the property of margin set to auto i.e margin: auto;.
- The <div> element takes up its specified width and divides equally the remaining space by the left and right margins.
We can set the width of an element that will prevent it from stretching to the container’s edge. In that case, the element will take the specified width & the rest of the space will be split equally between the two margins. If the width is set to 0 or 100% then the center aligning will not be applicable to the element.
Example: This example describes the use of the margin: auto to horizontally center a block element.
HTML
<!DOCTYPE html><html> <head> <title> How to horizontally center a div using CSS </title> <style> div { width: 300px; margin: auto; padding: 5px; border: 3px solid green; color: red; } h1, h2 { text-align: center; color: green; } </style></head> <body> <h1>GeeksforGeeks</h1> <h2>margin:auto</h2> <div> It is a computer science portal for Geeks. GeeksforGeeks ia a good website for learning computer science. </div></body> </html> |
Output:
Example: This example describes the use of the text-align: center to position the text to the center.
HTML
<!DOCTYPE html><html> <head> <title> How to horizontally center a div using CSS </title> <style> div { width: 300px; padding: 5px; border: 3px solid green; color: red; text-align: center; } h1, h2 { color: green; } </style></head> <body> <h1>GeeksforGeeks</h1> <h2>text-align:center</h2> <div> It is a computer science portal for Geeks. GeeksforGeeks ia a good website for learning computer science; </div></body> </html> |
Output:
We can use the CSS position property to align horizontally center a div.
Example: This example describes the use of the position property to align the horizontal center.
HTML
<!DOCTYPE html><html> <head> <title> How to horizontally center a div using CSS </title> <style> div { width: 300px; padding: 5px; border: 3px solid green; color: red; position: absolute; } h1, h2 { color: green; } </style></head> <body> <h1>GeeksforGeeks</h1> <h2>position: absolute</h2> <div> It is a computer science portal for Geeks. GeeksforGeeks ia a good website for learning computer science; </div></body> </html> |
Output:
For horizontal aligning the content or element to the left & right, we can use the float property by specifying its value as left for aligning to the left or right to align the element to the right.
Example: This example describes the float property & assigned its value as left.
HTML
<!DOCTYPE html><html> <head> <title> How to horizontally center a div using CSS </title> <style> div { width: 300px; padding: 5px; border: 3px solid green; color: red; float: left; } h1, h2 { color: green; } </style></head> <body> <h1>GeeksforGeeks</h1> <h2>float: left</h2> <div> It is a computer science portal for Geeks. GeeksforGeeks ia a good website for learning computer science; </div></body> </html> |
Output:
Note: For Microsoft Edge & Internet Explorer, The auto value is not supported in quirks mode.
Please Login to comment...