发表于: 2017-07-24 23:16:09

1 809


一、今天完成的事情

今天师弟的日报无法评级,后来古尘师姐说是后端数据有问题,score没有设置初始值,leave也没设。


二、明天计划的事情

尽量完成剩下的bug


三、遇到的问题

小课堂问题:实现垂直居中的几种方法?

1.table-cell

.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

.box5 span{

  position: absolute;

  top:50%;

  left:50%;

  width:100%;

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

  text-align: center;

        }

6. display:inline-block

.box6{

  text-align:center;

  font-size:0;

}

.box6 span{

  vertical-align:middle;

  display:inline-block;

  font-size:16px;

}

.box6:after{

  content:'';

  width:0;

  height:100%;

  display:inline-block;

  vertical-align:middle;

}

7. display:flexmargin:auto

.box7{

    display: flex;

    text-align: center;

}

.box7 span{margin: auto;}

8. display:-webkit-box

.box8{

    display: -webkit-box;

    -webkit-box-pack:center;

    -webkit-box-align:center;

    -webkit-box-orient: vertical;

    text-align: center

}

9. display:-webkit-box

.floater {

    float:left;

    height:50%;

    margin-bottom:-120px;

}

.content {

    clear:both;

    height:240px;

    position:relative;

}



四、收获

项目代码还是得熟透了,angular也要深入学习,不能捡了芝麻丢了西瓜。




返回列表 返回列表
评论

    分享到