How to Horizontally Center a DIV with CSS
In this tutorial, we are going to see how to horizontally center a DIV with CSS. If you want to align the <div> element horizontally with respect to the parent element, you can use the margin property with the value “auto”. The auto value automatically adjusts the left and right margins and aligns the DIV block horizontally at the center.
Source Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>How to Horizontally Center a DIV with CSS</title> <style> .box { width: 70%; margin: 0 auto; padding: 15px; background: #ff7d95; } </style> </head> <body> <div class="box"> <h1>Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </body> </html>
Result |
---|
TitleLorem ipsum dolor sit amet, consectetur adipiscing elit. |