今天做了的事：今天做完任务十二，讲了PPT。

明天要做的事：争取写完任务十三。

今天遇到的问题：

按照我们以往的理解，设置了display：none；的元素会完全消失，但是这里写的文字却不会消失，很奇怪的一件事。

2.option很难使文字居中，但是可以通过@吴彦祖的奇淫技巧，使用text-indent属性，这是一条用于文本缩进的属性，配合sass的计算，控制这个option里面的文字缩进多少，比如让四个字居中，那么缩进值就是50%-文字大小*4/2。但是这种方法不能自适应屏幕大小。

3.设置文字被折断出现小点点的时候，可以使用视口单位来让无论在大屏或是小屏都可以很好的折行。

还有什么就想不起来了，太多了

感悟：今天认识到了不一样的大家，嘿嘿，每个人都是不一样的人，而且都很有趣。一个人有趣真的很重要啊。

下面是ppt:

1.背景介绍

   44年前我们把人送上月球，但在CSS中我们仍然不能很好的实现垂直居中。——@James Anderson

2.知识剖析

   垂直居中就是竖向居中

   接下来就讲解在css中实现垂直居中的几种方法：

  1）单行文本垂直居中方法

        说明：

        该方式只适用于情况比较简单的单行文本，只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。

  2）多行文本垂直居中方法</h3>

        说明：

        父级元素display:table-cell，vertical-align:middle；

        使用table来布局；

        多行内容居中，且容器高度可变，也很简单，给出一致的 padding-bottom 和 padding-top ；

   3）div垂直居中：inline-block

        说明：

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

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

         说明

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

   5）div垂直居中：绝对定位之负值法

        说明：

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

   6）div垂直居中：绝对定位之translate

        说明： 

        CSS3的兴起，使得垂直居中有了更好的解决方法，就是使用transform代替上一种方法margin. transform中translate偏移的百分比值是相对于自身大小的

   7）div垂直居中：flex</h3>

       说明：

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

3.常见问题

怎样实现背景图片垂直居中？

4.解决方案

父元素

background-image: url("");

background-position: center center; //或者写成50% 50%;

background-repeat: no-repeat;

5.编码实战

6.扩展思考

使用writing-mode实现垂直居中

取值：

vertical-rl：垂直方向自右而左的书写方式。

vertical-lr：垂直方向自左而右的书写方式。

7.参考文献

参考：<a href="http://www.zhangxinxu.com/wordpress/?s=%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD">张鑫旭博客-垂直居中

8.更多讨论

还有更多实现垂直居中的方法吗？