css布局——水平垂直居中

方法一：display：table和display：table-cell实现多行文本垂直居中

单行文本垂直居中我们会用line-height，而多行文本垂直水平居中刚如何实现呢？

效果如下

css+html

//父容器和子容器定义样式

.box {
    display: table;
    height: 300px;
    padding: 15px;
    background-color: paleturquoise;
    width: 100%;
}

.introduce {
    display: table-cell;
    vertical-align: middle;
}

//html结构

 <div class='box'>
    <div class='introduce'>
        <p>你来自哪里</p>
        <p>你来自哪里</p>
        <p>你来自哪里</p>
    </div>
</div>

#