今天完成的事情：完成了任务十一的页面，优化代码。

明天计划的事情：开始任务十二。 

遇到的问题：1、当时的任务四做的不够严谨，头部的位置效果是用float加margin撑出来的，现在回过头再写这个页面，居中我开始是用的flex，不过任务要求在删除一个文字块的时候，另外两个的位置不能发生变化，所以用的是绝对定位，然后行高等于高度就可以实现垂直居中了。

                     2、在做任务十二的时候，有一个垂直居中的箭头，，于是就用任务十一的方法，可是这个时候垂直居中失效了，因为行高只能作用于内容，而箭头我是用border做出来的，尝试给border设置inline属性，可是transform属性失效了，还是用flex吧。

收获：即使现在回头做以前的页面，还是会碰到一点问题。

方法1：table-cell

html结构：

css：

方法2：display:flex

方法3：绝对定位和负边距

.box3{position:relative;}
.box3 span{
            position: absolute;
            width:100px;
            height: 50px;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-25px;
            text-align: center;
        }

方法4：绝对定位和0

这种方法跟上面的有些类似，但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中，很神奇吧。不过这里得确定内部元素的高度，可以用百分比，比较适合移动端。

方法5：translate

这实际上是方法3的变形，移位是通过translate来实现的。

方法6：display:inline-block

这种方法确实巧妙...通过:after来占位。

方法7：display:flex和margin:auto

方法8：display:-webkit-box

.box9{
    display: -webkit-box;    -webkit-box-pack:center;    -webkit-box-align:center;    -webkit-box-orient: vertical;
    text-align: center
}

css3博大精深，可以实现很多创造性的效果，需要好好研究下。

今天又发现一种方法，现在补上：

方法9：display:-webkit-box

这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。

content 清除浮动，并显示在中间。

<div class="floater"></div>  <div class="content"> Content here </div>  

.floater {
    float:left; 
    height:50%; 
    margin-bottom:-120px;
}
.content {
    clear:both; 
    height:240px; 
    position:relative;
}