水平垂直居中的几种方法

1.首先是垂直居中，display：inline-block配合 vertical-align: middle;使用，代码如下

<div style="width:1000px;height:600px;background:red;" class="box">
        <img width="50" height="50" src="images/pic1.jpg" alt=""><span>教室里的房价是第几哦</span>

    </div>

 <style>
        img{
            display: inline-block;
            vertical-align: middle;
        }
        span{
            display: inline-block;
            vertical-align: middle;

        }

二、水平垂直居中

1.父元素设置display：table-cell；vertical-align：middle；text-align：center；

子元素设置display：inline-block；

2.相对一个元素定位：父元素设置text-align：center；子元素设置display：inline-block；vertial-align：middle；

同时在给父元素设一个伪元素after--display：inline-block；vertial-align：middle；height：100%；（宽度为0；高度为100%；让子元素相对他去垂直居中）

3.用表格单元格的形式：给父元素设置display：table-cell；vertical-align：middle；text-align：center；

4.给父元素设置display：table-cell；vertical-align：middle；子元素dmargin：0 auto；

5.用定位：子元素position：absolute；top：50%；left：50%；magin-left：-width；margin-top：-height；

6.用定位：子元素定宽高；position：absolute；top：0；left：0；right：0；bottom：0；（如果不设宽高，则会被拉伸充满整个盒子）