CSS,HTML部分归纳

 text-decoration: none
 opacity: 0.1                 元素透明度
 background: transparent      透明色
 box-shadow: X,Y 阴影面积 颜色; 倒影    
 border-radius:               边框倒角
 box-sizing:border-box       加上他以后，border和padding则是被包含在宽高之内的。
                             哪怕padding和border加很多他也不会变行。
 vertical-align:middle      行内垂直居中
 text-align：center               文本居中
 align: cente                    元素居中
 margin:0 auto                 块级元素居中           （父容器设有宽）
 vertical-align: middle      垂直居中    （作用于行内元素：inline和table）
 display: table-cell;

盒子内文本垂直居中

 .demo{
			width: 100px;
			height: 100px;
			border: 1px solid black;
			/*position: absolute;             添加定位后文字垂直居中失效
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: 0 auto;*/
			vertical-align: middle;
			display: table-cell;          或display: inline-block;（盒子将变为行内块，完全包裹子元素）
		}

多行文本垂直居中

   #container span{
        display: table-row;
        text-align: center;
        line-height: 120px;     行高为容器上下高度与行数的平均值
         }                 

通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;