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