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 这种

就可以居中了。

div中内容图片居中效果

文字可按照上面方法进行添加。但是如div中套用图片，则不能进行如上操作。可使用一个空白的辅助图片，来撑开div。然后在设置即可。

以下是全屏等待效果代码

<div id="loading" class="load" style="position:absolute; top:0; left:0; right:0; bottom:0; z-index:9; opacity:0.8; vertical-align: middle; text-align: center; background-color:currentColor; display:none;">
    <img alt="" src="" id="img" style="height:99%; visibility:hidden;">
    <img src="~/Images/loding.gif" style="opacity:0.7" />
</div>