今天完成的事：今天边task5,边复习之前position和垂直居中的知识点，不同的场景，需要用到不同的方法实现垂直居中，今天就好几次都没有很好的实现，一气之下就去把这个这个知识点狠狠啃一遍，手敲了自己的收获

明天的计划：快速把task5写完

遇到的问题：今天问了师姐好几个问题，有些本以为是出了bug，复查才发现是自己粗心修改的时候多删除了一个“符号，所以码代码还是要严谨，不然问题很严重，可能要费大量时间去排查

收获：

水平居中和垂直居中

水平：

1.文本text，用text-align：center；

2.块级元素，固定宽度，width：100%；margin:0 auto;

3.不定宽块级元素，

<1>.将块级元素变成行内元素display：inline；然后text-align：center；

<2>.通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中

垂直：

1.单行文本，用height=line-height实现。

2.多行文本，设置块级元素display：table-cell;(表格单元显示)，激活vertical-align属性，vertical-align：middle；

3，对于图片img，eg:<div class="header">

    <a href="#"><img src="task5-1_02.png" href="#"></a>

        <p>个人主页</p>

</div>

设置 .hearder a{display:inline-block},a变成块级元素，然后设置.header img{vertical-align：middle；}可以实现img垂直居中。

块级元素的垂直居中实现方法

1、绝对定位+固定宽高的垂直居中div{ position: absolute; width: 18em; height: 6em; top: 50%; left: 50%; margin-top: -3em;/*高度的一半*/ margin-left: -9em;/*宽度的一半*/ }

原理：这种居中的方法本质上做了两件事，一是先把需要居中的元素的左上角放在视口（或具有定位属性的父元素）的正中心，然后再利用负外边距把它向左、向上移动自身宽高的一半，从而使元素水平和垂直居中。

2、绝对定位+自适应宽高的垂直居中

CSS3为我们提供的2D转换属性中的translate属性恰好是以元素自身尺寸为基准进行换算和移动的。div{ position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); }（这条还没很好的理解，主要是还没用到）