今天完成的事：

1用栅格系统做了任务八的第一个页面。

2了解了 

垂直居中

vertical-align

我们都知道，每个人都有不同的嗜好，有的人喜欢吃甜食，有的人喜欢吃辣的东西，有的人不喜欢吃芹菜，有的人不喜欢吃羊肉等等。CSS中的有些元素也是这样，他们有的只对牛奶感兴趣，有的只喜欢吃坚果和果冻，而讨厌牛奶。而vertical-align呢，是个比较挑食的家伙，它只喜欢吃果冻，从小吃果冻长大，没有了果冻，它就会闹脾气，对你不理不睬。我称之为“果冻依赖型元素”，又称之为“inline-block依赖型元素”，也就是说,只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。我对css-vertical-align的一些理解与认识

在使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;

/*第一种方法*/

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

/*第二种方法*/

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

实用绝对定位

.parent{position:relative;}

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

实用flex实现

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

水平垂直全部居中

利用vertical-align,text-align,inline-block实现

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

.child{display:inline-block;}

利用绝对定位实现

.parent{position:relative;}

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

利用flex实现

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

明天计划的事情：

1完成任务八第二个页面。

2深度了解媒体查询。

遇到的问题：

1今天做任务八第一个页面的下面五个图片的时候，发现bootstrap上的栅格没有五格的栅格，请教了师兄后，师兄说图片不用做栅格系统，做个浮动就可以自动自适应，按照师兄的方法，真的成果做出了图片栏。

收获：

1今天初试了怎么使用栅格系统。

2学会了怎么用fiex让文本垂直居中。