display:table和display:table-cell的妙用

实现左右布局效果如图

左右

    

        
上一篇
        
下一篇
    

    
.post-footer{
    margin-top: 30px;
    display: table;
    width: 100%;
    border-top: 0.5px dashed wheat;
}
.post-last{
    display: table-cell;
}
.post-next{
    text-align: right;
    display: table-cell;
}

实现多行文本垂直居中效果

垂直居中

 
    

        

            我们只需要将容器设为display:table然他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格，然后就像在表格里一样，给子元素加个vertical-align: middle就行了,多行文字垂直居中啦。
        
    
    
.parent{
    display: table;
    width: 500px;
    height: 500px;
    text-align: center;
    background-color: #27A9E3;
}
.son{
    display: table-cell;
    vertical-align: middle;
}

我们只需要将容器设为display:table然他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格，然后就像在表格里一样，给子元素加个vertical-align: middle就行了,多行文字垂直居中啦。