H5C3__元素垂直居中的方法

       在 CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素， 就对它的父元素应用 text-align:center; 如果它是一个块级元素，就对它自身应用 margin:auto。还有没有其他的方法呢，我们需要从一下两个方面来讨论：

1. 文本垂直居中的方法
2. 块级元素垂直居中的方法

1.文本垂直居中的方法

   文本垂直居中主要分为单行文本和多行文本居中两种。

    A.单行文本垂直居中

        1.方法：line-height=height （只需父级元素设置此代码即可，较简单，不再赘述）

        2.方法：父级元素设置display:table; 子元素设置display:table-cell,并且设置vertical-align:middle.

     案例1：单行文本垂直居中：display:table;+display:table-cell+vertical-align:middle;

    <div class="box">
        <p class="p">项目实战中单行文本居中</p>
    </div>

样式文件

<style>
        *{
            margin: 0;
        }
        /*父级具有table的特性，子元素具备td，也就是单元格的特性，再搭配vertical-align:middle就可以实现垂直居中*/
        .box{
            display: table;
            width: 600px;
            height: 500px;
            margin: 50px auto;
            border: 1px solid red;
            text-align: center;
            /*line-height: 500px;*/
        }

        .p{
            display: table-cell;
            vertical-align: middle;
        }
</style>

        效果图：