今天完成的事情：

完成关于我们页面、联系我们页面、公司搜索页面、404页面的样式及响应式。

小课堂讨论问题：

有哪些方法可以实现垂直居中？

方法1：table-cell

<div class="box box1">

        <span>垂直居中</span>

</div>

.box1{

    display: table-cell;

    vertical-align: middle;

    text-align: center;        

}

方法2：display:flex

.box2{

    display: flex;

    justify-content:center;

    align-items:Center;

}

方法3：绝对定位和负边距

.box3{position:relative;}

.box3 span{

            position: absolute;

            width:100px;

            height: 50px;

            top:50%;

            left:50%;

            margin-left:-50px;

            margin-top:-25px;

            text-align: center;

        }

方法4：绝对定位和0

.box4 span{

  width: 50%; 

  height: 50%; 

  background: #000;

  overflow: auto; 

  margin: auto; 

  position: absolute; 

  top: 0; left: 0; bottom: 0; right: 0; 

}

方法5：translate

.box6 span{

            position: absolute;

            top:50%;

            left:50%;

            width:100%;

            transform:translate(-50%,-50%);

            text-align: center;

        }

明天计划的事情：

职位搜索页面、找职位页面、找精英页面的样式书写

遇到的问题：

暂无

收获：

垂直居中的几种方法