今天完成的事情：

完成竖向轮播图的样式修改，但是我发现我的所有轮播都没有切换图片时的动画过渡效果，不知道是不是插件没有设置正确。修改了部分接口。

小课堂课后讨论：

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

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;
}

优点： 
适用于所有浏览器 
没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现

缺点： 
唯一我能想到的就是需要额外的空元素了

2.怎么实现水平居中？

1.父元素text-align:center (子元素为inline或者inline-block)

2. margin: 0 auto; （元素为块状元素）

3.绝对定位： 

position: absolute; width: 宽度值; left: 50%; margin-left: -(宽度值/2);

4.flex:

    display: flex;

    justify-content: center;

    align-items: center;

5.fit-content

width: -moz-fit-content; 

width:-webkit-fit-content;

 width: fit-content;

 margin-left: auto; 

margin-right: auto;

3.怎么实现水平垂直居中？

结合1和2

明天计划的事情：

继续修改接口，并及时与后端沟通

遇到的问题：

暂无

收获：

垂直居中的方法。