今天完成的事情：

归纳了几种方便好用的水平居中方式

（1）最常用的方法，需要父元素设置width以及height

margin: 0 auto;
text-align: center;

（2）使用flex布局，需设置在父元素，可以使子元素居中

display: flex;
justify-content: center;
align-items: center;

display:flex;布局

justify-content:center;定义项目在主轴(水平方向)上居中对齐

align-items:center;定义项目在交叉轴(垂直方向)上居中对齐

注：flex将会使子元素的float、vertical-align、clear属性失效；还有webkit浏览器内核的问题，需要添加display: -webkit-flext;

总结：一般情况下div或者元素都会设置一个height，而width有可能不设置，或者干脆就是100%，所以水平居中要比垂直居中更费力，用弹性布局更多。

<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0">

一般浏览器适配都是设置width=device-width，所以横向分辨率变化时，内容就会被压缩。而竖直变化只会多出滚动条。

明天计划的事情：

学习inline/inline-block/block之间的区别并实验

收获：

过于纠结在弹性的垂直和水平居中上，这是不对的，在布局时应该优先考虑方便和精简，在有高度限定时，用margin来调整居中显然要快捷，而且不会和其他布局属性冲突，比如float,display: absolute/relative等。

在不与其他布局属性冲突，并且需要时，再使用弹性布局。（n个小时的血与泪啊）

贴一下原来的任务五代码，没有用弹性的居中，基本都是靠px调整的。