多行文本垂直居中对齐之表格元素类型

box中只有p标签中的内容需要水平垂直居中的分析：
1、首先将父元素转换为块状表格类型display: table;
2、给父元素添加maigin：0 auto；实现整个元素在页面中居中显示
3、然后给子元素转换为td表格单元格元素类型
4、给子元素里的内容，利用 vertical-align: middle;进行垂直居中显示

        .box{
             width: 300px;
             height: 300px;
             display: table;/*块状表格类型*/
             margin: 0 auto;/*水平居中*/
             background-color: cornflowerblue;
         }
         .box p{
             display: table-cell;/*块状表格单元格类型*/
             vertical-align: middle;/*垂直居中*/
             font-size: 14px;/*字号大小*/
         }

<div class="box">
        <p>
            box中只有p标签中的内容需要水平垂直居中box中只有p标签中的内容需要水平垂直居中box中只有p标签中的内容需要水平垂直居中
        </p>
    </div>

容器中的p标签有宽高且内容在容器中居中对齐的分析：

1. 首先需要给外围元素写宽高，设置父元素水平居中

2. 然后需要给父元素写上宽高，将父元素转换为表格单元格的元素类型display: table-cell;

3. 表格单元格元素类型使用margin: 0 auto;水平居中是无效的，
   可以直接使用vertical-align：middle；，设置子元素p标签的垂直居中对齐；
   使用text-align: center;设置p标签以及标签中的内容水平居中对齐

4. 最后给子元素转换为表格单元格的元素类型，并使得子元素中的内容垂直居中对齐；水平对齐会继承父元素中的样式

        .jzWrap{
            width: 300px;
            height: 300px;
            margin: 0 auto;/*整体内容水平居中对齐*/
         }
        .jz{
            width: 300px;
            height: 300px;
            background-color: black;
            display: table-cell;/*父元素转换为块状表格单元格类型*/
            vertical-align: middle;/*子元素p标签的垂直居中对齐*/
            text-align: center;/*设置p标签以及标签中的内容水平居中对齐*/
        }
        .jz p{
        width: 100px;  
            color: #ffffff;
            font-size: 14px;
            display: table-cell;/*子元素转换为块状表格单元格类型*/
            vertical-align: middle;/*子元素内容的垂直居中对齐*/
            display: inline-block; /*转换成行内块元素类型*/                
        }

<div class="jzWrap">
    <div class="jz">
        <p>
            垂直居中的显示方法垂直居中的显示方法垂直居中的显示方法垂直居中的显
        </p>
    </div>
</div>