Html CSS 文字垂直居中，多行文字垂直居中

方式一、如果仅仅只是单行文字居中，CSS样式如下

.box {
    width: 300px;
    height: 300px;
    background: #ddd;
    line-height: 300px;
}

---

方式二、如果是不能确定的行数，实现多选垂直居中，CSS样式和Html如下

.box {
    display: table;
    background-color: #f2f2f2;
    height: 100px;
    width: 100%;
}

.con {
    display: table-cell;
    vertical-align: middle;
    /*text-align: center;*/
    line-height:20px;
    padding:5px;
}

<div class="box">
    <p class="con"> 单行垂直集中，多行垂直集中</p>
</div>

效果如下