Use margin auto to align div element to center in HTML and CSS

Description

The following code shows how to use margin auto to align div element to center.

Example


<html>
<head>
<!--  ww  w .  ja  va2  s .  com-->
<title>An example with sans-serif fonts</title>
<style type="text/css" media="screen">
#wrapper {
margin: 0 auto;
width: 400px;
}

body {
font-family: "Lucida Grande", "Lucida Sans Unicode", Lucida, Arial,
Helvetica, sans-serif;
line-height: 1.5;
}

h1 {
font-size: 1.8em;
line-height: 1em;
padding-bottom: 7px;
border-bottom: 1px solid #cccccc;
margin-bottom: 7px;
color: #666666;
font-weight: normal;
}

h2 {
font-size: 1.3em;
}

h3 {
font-size: 1.2em;
margin-top: 1.65em;
}

p {
font-size: 1.2em;
margin-bottom: 1.2em;
}

h1+p {
font-weight: bold;
color: #222222;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Article heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
aliquet elementum erat. Integer diam mi, venenatis non, cursus a,
hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut,
eleifend nec, risus.</p>
<p>Quisque faucibus lorem eget sapien. In urna sem, vehicula ut,
mattis et, venenatis at, velit. Ut sodales lacus sed eros.
Pellentesque tristique senectus et netus et malesuada fames ac turpis
egestas.</p>
<h2>Curabitur sit amet risus</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
aliquet elementum erat. Integer diam mi, venenatis non, cursus a,
hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut,
eleifend nec, risus.</p>
<p>Quisque faucibus lorem eget sapien. In urna sem, vehicula ut,
mattis et, venenatis at, velit. Ut sodales lacus sed eros.
Pellentesque tristique senectus et netus et malesuada fames ac turpis
egestas.</p>
<h3>Praesent rutrum</h3>
<p>Nam scelerisque dignissim quam. Ut bibendum enim in orci.
Vivamus ligula nunc, dictum a, tincidunt in, dignissim ac, odio.</p>
<h3>Habitant morbid</h3>
<p>Nam scelerisque dignissim quam. Ut bibendum enim in orci.
Vivamus ligula nunc, dictum a, tincidunt in, dignissim ac, odio.</p>
</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Use margin auto to align div element to center in HTML and CSS

Home »
  HTML CSS Tutorial »
    Layout »
      Margin

HTML CSS Tutorial Margin
Add margin between sibling in HTML and CSS
Add margin to list item in HTML and CSS
Demonstrate Margin collapse in HTML and CSS
Demonstrate margin collapse for nested elem...
Demonstrate margin collapse for nested elem...
Demonstrate margin collapsing also happens ...
Set Margin between parent and children in H...
Set Margin with four values in HTML and CSS
Set Margin with three values in HTML and CS...
Set Margin with two values in HTML and CSS
Set four separate margin properties: margin...
Set margin bottom to 15px in HTML and CSS
Set margin bottom to 5% in HTML and CSS
Set margin for hr and auto align hr to cent...
Set margin for top right left bottom in HTM...
Set margin-left and margin-right with perce...
Set margin left and right to auto to center...
Set margin-left to 10px in HTML and CSS
Set margin-left to 25% in HTML and CSS
Set margin-left to auto in HTML and CSS
Set margin left to auto to align element to...
Set margin-left to auto to align to right i...
Set margin right to auto to align element t...
Set margin-right to auto to align to left i...
Set margin to auto to center a paragraph in...
Set to use a negative margin in HTML and CS...
Use auto margin to align block to center in...
Use auto margin to align block to left in H...
Use auto margin to align block to right in ...
Use auto margin to float element to center,...

Use margin auto to align div element to cen...

Use margin to make offset in HTML and CSS
Use margin to offset child in HTML and CSS