今天完成的事情：

1、把中关村教育官网项目的代码打tag；

2、制作并讲解css垂直居中有哪些方法；

3、从tag放代码到branch里面修改问题；

明天计划的事情：

1、在分支中修改pm提出的一些中关村教育官网页面问题；

2、熟悉修真院官网的代码，看下官网的功能实现；

遇到的问题：

关于svn代码打tag，从tag里面branch代码这些功能只看过视频，实际操作起来还是有些不熟练；

收获：

css有哪些方式可以实现垂直居中？

1.背景介绍

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

2.知识剖析

垂直居中就是竖向居中

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

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

说明：

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

demo：https://ptteng.github.io/PPT/demo/css-03-vetically/demo1.html

2、多行文本垂直居中方法

说明：

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

2.2使用table来布局；

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

demo：https://ptteng.github.io/PPT/demo/css-03-vetically/demo2.html

3、div垂直居中：table

说明：

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

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

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

4、div垂直居中：inline-block

说明：

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

demo：https://ptteng.github.io/PPT/demo/css-03-vetically/demo3.html

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

说明：

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

demo：https://ptteng.github.io/PPT/demo/css-03-vetically/demo4.html

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

说明：

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

demo：https://ptteng.github.io/PPT/demo/css-03-vetically/demo5.html

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

说明：

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

demo：https://ptteng.github.io/PPT/demo/css-03-vetically/demo6.html

8、div垂直居中：flex

说明：

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

https://ptteng.github.io/PPT/demo/css-03-vetically/demo7.html

3.常见问题

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

4.解决方案

父元素{

background-image: url("");

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

background-repeat: no-repeat;

}

demo：https://ptteng.github.io/PPT/demo/css-03-vetically/demo8.html

5.编码实战

6.扩展思考

使用writing-mode实现垂直居中

取值：

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

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

demo：https://ptteng.github.io/PPT/demo/css-03-vetically/demo9.html

7.参考文献

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

8.更多讨论

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