div内容上下居中

 

 

今天无聊闲逛技术群，听一哥们说要在div里面居中span内容。

第一印象：vertical-align: middle;

结果失效。因为他只对属于inline的元素或是inline-block、table-cell起作用。

故此代码修改如下：

div{
    width: 200px;
    height: 50px;
    border: 1px solid;
    display: table-cell;
    vertical-align: middle;
}

把div渲染成表格形式，类似于 td 这种

就可以居中了。

　　By~