实现水平垂直居中的4种方式和行内块，行内元素，块状元素区别

结构如下

````H5`

<div class="parent">
    <p></p>
</div>
1:
.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    
}
2:
p{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
3:
 p{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50%;
    margin-top: -50%;
    /*
    transform: translate(-50%, -50%)
    */
}

4:
.parent{
    text-align: center;
    width: 100%;
    height: 300px;
    line-height: 300px;
}
p{
    display:inline-block;
    vertical-align: middle;
    width: 50px;
}
总结：
块状元素水平垂直居中   1.flex  2.定位和margin的配合
行内块元素水平垂直居中 
1.给父元素设置text-align:center,子元素调节margin-top或margin-bottom值   
2.父元素设置text-align:center,父元素高度=行高，子元素设置inline-block和vertical-align:middle
行内元素水平垂直居中   1.给父元素设置text-align:center,父元素设置lineHeight=height(单行)

display: inline;
display:inline-block;
display:block;

行内元素特征：(1)设置宽高无效
            (2)对margin仅设置左右方向有效，上下无效；
                padding设置上下左右都有效，即会撑大空间
            (3)不会自动进行换行
代表元素有span,a,i,b,sub,sup
行内块元素特征：
            (1)不自动换行
            (2)能够识别宽高
            (3)默认排列方式为从左到右
 块状元素特征：
         (1)能够识别宽高
         (2)margin和padding的上下左右均对其有效
         (3)可以自动换行
         (4)多个块状元素标签写在一起，默认排列方式为从上至下
代表元素：div,h1~h6,p、nav、aside、header、footer、section、article、ul-li、address
行内块inline-block元素之间出现空白间隙原因及解决办法
     1.上一个元素的闭合标签与下一个元素的开始标签写在同一行
       或者将两个inline-block元素间加上空白注释
     2.父元素设置font-size为0，子元素单独再设置字体大小
     3.具体做法是给父元素一个letter-spacing或者word-spacing的负值，子元素再调整为0即可
              letter-spacing 字符间距
              word-spacing  CSS 把“字（word）”定义为任何非空白符字符组成的串，并由某种空白字符包围 增加或减少单词间距（字间隔）