准备工作
打开sublime text3，并且新建一个html文档和一个css文档（这里我们要做到结构和样式相分离，为了更好编写，我分了两屏）
把最基本的html框架写出来： <html> <head> <title>使用css水平居中div</title> </head> <body> </body> </html>
在html的head部分写上编码字符集并引入css文件（ <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="div.css"> ） 在css里面使用通配符选择器，把网页初始的margin和padding归0（ *{ margin: 0px; padding: 0px; } ）
在html的body里面写一个div，打上文字并设置一个class名（ <div class="centered"> 使用css水平居中div </div> ） 在css里面选择这个div，给它设置宽、高、背景颜色和边框（ width: 200px; height: 200px; border: 1px solid black; background-color: green; ）
在浏览器中打开，查看现在的效果
使用margin水平居中div
我们直接在选择的div的class名里面加一个“margin: 0 auto;”属性 保存，在浏览器中刷新，就可以看到div水平居中了。
“margin: 0 auto;”这个属性设置的是div的外边距高为0，宽为auto（自动）。