今天完成的事情：
回顾了所知道的垂直居中的方法
1.通过需要居中的容器的vertical-align:middle属性的方法实现
.contant{
background-color: #ccc;
height: 88px;
line-height: 88px; /*需要设置行高，否则box无法实现垂直居中*/
}
.box{
width: 50px;
height: 50px;
background-color: lightblue;
display: inline-block;
vertical-align: middle;
}
<!-- 通过设置box为inline-block类型使用vertical-align实现 -->
<div class="contant">
<div class="box"></div>
</div>
2.通过父容器设置display:table-cell，再利用vertical-align:middle方法实现
.contant2{
background-color: #ccc;
height: 88px;
display: table-cell;/*父容器设置table-cell*/
vertical-align: middle;/*父容器设置vertical-align*/
}
.box2{
background-color: lightblue;
height: 50px;
width: 50px;
}
<!-- 父容器设置table-cell，并且vertical-align设置middle内容即可以垂直居中
设置table-cell后父容器间改变display状态 -->
<div class="contant2">
<div class="box2"></div>
</div>
3.通过margin:auto实现绝对定位元素的相对居中
.contant3{
position: relative;
background-color: #ccc;
height: 88px;
}
.box3{
background-color: lightblue;
position: absolute;
margin: auto;
/* left: 0;
right: 0; */
top: 0;
bottom: 0;
width: 50px;
height: 50px;
}
<!-- 利用margin:auto实现居中。将子元素相对于父容器绝对定位后，将子元素需要居中的方向的两侧设置为0
设置子元素marin:auto -->
<div class="contant3">
<div class="box3"></div>
</div>
4.通过绝对定位延需要居中方向的一侧设置偏移50%,再设置居中元素margin值为负的居中方向一半的宽度。
.contant4{
position: relative;
background-color: #ccc;
height: 88px;
}
.box4{
background-color: lightblue;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
}
.contant5{
position: relative;
background-color: #ccc;
height: 88px;
}
.box5{
background-color: lightblue;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<!-- 子元素相对父元素绝对定位后设置top50%,子元素margin-top为子元素高度的一半的负值 -->
<div class="contant4">
<div class="box4"></div>
</div>
<hr>
<!-- 本质上和方法4同样 -->
<div class="contant5">
<div class="box5"></div>
</div>
学习了backgroun属性的用法
1.background-color 设置背景颜色。 属性可以是 rgb()、rgba()、#fff
2.background-image 设置背景图片。 属性 url()
3.background-position 设置背景图片偏移位置。 属性 0 12px
4.background-repead 设置背景图片是否重复。 属性 no-repead
5.background-size 设置背景图片大小。 属性 12px 12px 、100% 100%
学习弹性布局display:flex
flex可以方便的控制内部容器的水平或垂直方向的布局，包括垂直，靠左，靠右，等分，靠边对齐等
明天计划的事情：
关于flex深入学习，学习vertical-align和line-height关系,bootstrap是什么
遇到的问题：
任务5中的中间的内容区域，每行内容中的左右文字都需要垂直居中，因为存在多行显示文字的情况，所以不能设置父容器line-heigt=height，vertical-align:middle.
而且最后一栏在缩小后文字挤压会扩大行高，因此不能定死外部栏的行高，需要能根据内部的元素高度撑开。已知的垂直居中方式中好像没有可以撑开父容器高度的方案。
采用了左侧文字通过绝对定位后top:50%，tansform: translateY(-50%)实现垂直居中，右侧通过计算文字大小和padding:top/bottom实现高度符合外部容器的高度。
收获：
使用padding:top/bottom也可以实现类似垂直居中的效果
疑问：
除了使用flex之外有没有可以实现最后一行 既能保证垂直居中，又可以根据内容不容变化撑开父容器的方法
返回列表
评论