Add 'How to align a DIV horizontally center using CSS'

4 years ago · 61ea7f7cae
parent 2e6b80262c
commit 61ea7f7cae
1 changed files with 30 additions and 0 deletions
--- a/How-to-align-a-DIV-horizontally-center-using-CSS.md
+++ b/How-to-align-a-DIV-horizontally-center-using-CSS.md
@ -0,0 +1,30 @@
+### How to align a DIV horizontally center using CSS
+
+Use the CSS margin property
+If you would like to center align a `<div>` element horizontally with respect to the parent element you can use the CSS margin property with the value auto for the left and right side, i.e. set the style rule `margin: 0 auto;` for the div element. The auto value automatically adjusts the left and right margin and horizontally center align the div element's block box.
+
+However, this solution will work only when the width of the parent element is more than the containing div element that you want to align. Let's check out an example:
+
+```
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Horizontally Center a Div Using CSS</title>
+<style>
+    .container {
+        width: 80%;
+        margin: 0 auto;
+        padding: 20px;
+        background: #f0e68c;
+    }
+</style>
+</head>
+<body>
+    <div class="container">
+        <h1>This is a heading</h1>
+        <p>This is a paragraph.</p>
+    </div>
+</body>
+</html>
+```