设置块元素水平垂直居中方法四

①将小div转成行内块 display: inline-block

②在小div后，新增span标签，给小div设置vertical-align: middle；

③给大div设置line-height为大div高度，text-align: center；

<style>
       .big{
             width: 500px;
             height: 500px;
             border: 3px solid #f00;
             line-height: 500px;
             text-align: center;
         }
       .small{
             width: 100px;
             height: 100px;
             background-color: #00f;
             display: inline-block;
             /* 
                 修饰的是行内块
                 垂直的对齐方式
                 参考谁进行垂直对齐 - 当前行
             */
             vertical-align: middle;
         }
</style>
    <div class="big">
        <div class="small"></div><span>文字</span>
    </div>