今天完成的事情：

今天完成了页面一的布局，样式还没有调试完。

任务过程中多次用到了水平垂直居中，现在结合今天看的攻略里的内容在这里记录一下

水平居中：

1.使用inline-block和text-align

.parent{text-align: center;}

.child{display: inline-block;}

2.使用margin

.child{width: 200px; margin: 0 auto;}

3.使用table

.child{display: table; margin: 0 auto;}

4.使用绝对定位

.parent{position:relative;}

/*或者实用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度，但兼容性好*/

.child{position:absolute; left:50%; transform:translate(-50%);}

5.使用弹性盒子

/*第一种方法*/

.parent{display:flex; justify-content:center;}

/*第二种方法*/

.parent{display:flex;}

.child{margin:0 auto;}

垂直居中：

1.使用vertical-align

/*第一种方法*/

.parent{display:table-cell;vertical-align:middle;height:20px;}

/*第二种方法*/

.parent{display:inline-block;vertical-align:middle;line-height:20px;}

但是只有当一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）时，其身上的vertical-align属性才会起作用

2.使用绝对定位

.parent{position:relative;}

.child{positon:absolute; top:50%; transform:translate(0,-50%);}

3.使用弹性盒子

.parent{display:flex; align-items:center;}

水平垂直居中：

1.使用vertical-align、text-align、inline-block

.parent{display:table-cell; vertical-align:middle; text-align:center;}

.child{display:inline-block;}

2.使用绝对定位

.parent{position:relative;}

.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

3.使用弹性盒子

.parent{display:flex;justify-content:center;align-items:center;}

明天计划的事情：

完成页面一的调试，尝试响应式布局，继续写第二个页面

遇到的问题：

今天在布局的时候用了bootstrap，但是感觉修改样式好麻烦啊，有点花时间，感觉不使用bootstrap，直接写也能写出来，是否一定要使用bootstrap呢

收获：

通过写页面熟悉了以前学习的知识和布局，能够较为熟练地使用水平垂直居中