今天完成的事情

1、完成了任务7的首页和结果页

2、修改了任务6的多个问题

1、头部按钮border设置成none，按钮与地图图标没有垂直居中；通过调试       设置了border：0 none  调整header的img

 2、选择框中的字符没有水平居中；还没解决，需要重写下拉列表

 3、日期图片没有显示完全； 调整了图片的大小。使其显示完整

 4、列表被最下面的按钮遮住一部分； 给main部分设置margin-bottom，解决了问题

明天计划的事情

1、完成任务7的投票页

2、开始进行任务8

遇到的问题

1、任务6中的下拉列表使用了select，其中的文字居中困难，不支持属性的设置，只有使用padding进行调试，但因为屏幕的不一，显示的效果也不一。

明天使用其他的方法模拟下拉列表

收获

小课堂：有什么方法可以实现垂直居中

1、垂直居中：flex

给父元素设置display：flex后再设置align-items: center表示让子元素垂直居中

2、垂直居中：绝对定位之translate

使用transform代替上一种方法margin. transform中translate偏移的百分比值是相对于自身大小的；

3、垂直居中：绝对定位之负值法

使用绝对定位将top设置为50%，mergin-top设置为内容高度的一半(height + padding) / 2的负值；内容超过元素高度时需要设置overflow决定滚动条的出现；top：50%元素上边界位于包含框中点，设置负外边界使得元素垂直中心与包含框中心重合

4、垂直居中：绝对定位之margin：auto

父元素相对定位，子元素绝对定位。 子元素的上下左右均设置0定位且设置margin：auto

5、垂直居中：inline-block

给元素设置dispaly：inline-block配合vertical-align：middle来垂直居中

6、垂直居中：table

在table标签中，单元格框中的单元格内容是水平垂直居中的。

display:table此元素会作为块级表格来显示 类似table标签

display:table-cell 此元素会作为一个表格单元格显示 类似td 和 th标签