1、首先在电脑端找到代码文档,打开要修改的html结构的文档。
![](https://img1.sycdn.imooc.com//5c7cd5c20001358d06000299.jpg)
2、然后准备写一个div用来放内容,可以给div设置边框。
![](https://img1.sycdn.imooc.com//5c7cd5c20001a01306000298.jpg)
3、然后在div中添加内容,显示出来会发现内容偏向于左上角,如图所示。
![](https://img1.sycdn.imooc.com//5c7cd5c200012aca06000300.jpg)
4、接着给div设置水平居中,并且设置行高为div的高度,让其水平垂直居中。
![](https://img1.sycdn.imooc.com//5c7cd5c20001140306000299.jpg)
5、还可以改变div的属性,让其display属性为table-cell,在table单元格中可以通过vertical-align垂直居中。
![](https://img1.sycdn.imooc.com//5c7cd5c20001f96f06000300.jpg)
6、若使用display转化后,margin的auto属性不起作用,可以运用栅栏系统进行布局,如图所示。
![](https://img1.sycdn.imooc.com//5c7cd5c20001468406000297.jpg)