元素水平居中、垂直居中

元素水平居中：
1.行内元素：给父元素设为text-align:center;
块元素：inline-block+父元素text-align:center

2.块元素：margin-left、margin-right设为auto

3.浮动元素：
父元素：position:relative;
　　　　left:50%;
子元素：position:relative;
　　　　right:50%;

4.绝对定位元素
　　1.已知宽度：
　　　　position:absolute;
　　　　left:50%;
　　　　margin-left:-(宽度/2);
　　2.绝对定位元素，不知宽度
　　　　父元素 {
　　　　　　position:absolute;
　　　　　　left:50%;
　　　　　}
　　　　子元素 {
　　　　　　position:relative;
　　　　　　right:50%;
　　　　}
5.flex
　　　　父元素 {
　　　　　　display:flex;
　　　　　　justify-content:center;
　　　　}

元素垂直居中
1.文本：line-height:快元素高度

2.图片：
　　　　父元素 {
　　　　　　line-height:数值；
　　　　}
　　　　img {
　　　　　　vertical-align:middle
　　　　}

3. 　　父元素 {
　　　　display:table;
　　　　}
　　　子元素 {
　　　　display:table-cell;
　　　　vertical-align:middle;
　　}

4.已知高度

　　子元素 {
　　　　position:absolute;
　　　　top:50%;
　　　　margin-top:-(高度/2);
　　}

5.不知高度

　　 子元素 {
　　　　position:absolute;
　　　　top:50%;
　　　　transform:translate(-50%,-50%);
　　　}

6.flex
　　父元素 {
　　　　display:flex;
　　　　align-items:center;
　　}