1/*ADD MARGIN auto to left and right*/
2.box1{
3 width:80%;
4 margin:0 auto;
5}
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5.center {
6 margin: auto;
7 width: 80%;
8 border: 3px solid #73AD21;
9 padding: 10px; # deals with margins within the element itself
10 margin: 20px; # deals with area around outside of element
11}
12</style>
13</head>
14<body>
15
16<h2>Center Align Elements</h2>
17<p>To horizontally center a block element (like div), use margin: auto;</p>
18
19<div class="center">
20 <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
21</div>
22
23</body>
24</html>
1It's normal to not know how to center a div, just copy and learn from the codes below
1/* html */
2<h1>Centering with CSS</h1>
3
4<h3>Text-Align Method</h3>
5<div class="blue-square-container">
6 <div class="blue-square"></div>
7</div>
8
9<h3>Margin Auto Method</h3>
10<div class="yellow-square"></div>
11
12<h3>Absolute Positioning Method</h3>
13<div class="green-square"></div>
14
15/* css */
16h1,
17h3 {
18 text-align: center;
19}
20
21.blue-square-container {
22 text-align: center;
23}
24
25.blue-square {
26 background-color: #0074D9;
27 width: 100px;
28 height: 100px;
29 display: inline-block;
30}