How to horizontally center a div using CSS? - GeeksforGeeks

08 Nov, 2021
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.
ysachin2314
bhaskargeeksforgeeks
CSS-Misc
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?