1. 完成ppt制作，总结了垂直居中的方法
明天计划的事情：
1. 开始任务14
遇到的问题：
暂无，主要就是总结一下之前一些零散的方法，归纳分类，什么时候该用什么垂直方式合适
收获：
水平居中
1 text-align：center 对内联和内联块作用
2 margin：0 auto； 对块元素作用，注意不能在css直接垂直居中
3 absolute +margin/translate
原理：利用绝对定位 top 0 和 left 50%，然后margin或translate减去元素本身内容区的一半，就可以实现水平居中，两个都设置50%，水平垂直居中
4 absolute + margin:auto
margin:auto 和 left,right(四个值都设置为水平垂直居中)都设置为0实现水平居中,不过这里得确定内部元素的高度，可以用百分比，比较适合移动端。
6 flex + justif-content：center
5 flex + margin: 0 auto ; 去掉0水平垂直居中
10 calc（50%-自身一半）
垂直居中
1 line-height 单行文字居中
将单行文字设置行高以后，文字会位于行高的中间位置。也就是需要将元素的 line-height 设置成和高度样
2 line-height + inline-block 多对象垂直居中
在要居中的对象外面包裹一层，并将包裹的display设置为inline-block，再给他设置vertical-align;middle；,给父元素设置行高
3 absolute + margin/translate（）
利用绝对定位 top 50% 和 left 0，然后margin或translate减去元素本身内容区的一半，就可以实现垂直居中，两个都设置50%，水平垂直居中
4 absolute + margin:auto
原理：通过 margin:auto 和 top,bottom(四个值都设置为水平垂直居中)都设置为0实现水平居中,不过这里得确定内部元素的高度，可以用百分比，比较适合移动端。
5 flex + margin：auto 0;
由于flex元素对空间的特殊解读性，只要给父元素设置flex，接着在需要垂直居中的元素上设置margin: auto 0；即自动垂直居中，去0，水平垂直居中
6 flex + align-items
给容器设置，内部元素全部都垂直居中
7 flex + align-self
给容器内的项目设置，只对自己设置，也会改变对自身作用的align-items
8 display：table-cell + vertical-align：middle
显示为单元格，给自己设置垂直居中，内部的元素就都会垂直居中，单元格比较特殊，正常来说vertical-align都是只对自己作用的
9 :before + inline-block
原理：利用 :before 伪类元素设定为 100% 高的 inline-block，再搭配上将需要居中的子元素同样设置成 inline-block 性质后，同设vertical-align:middle 来达到垂直居中的目的了，该方法需要注意去掉 inline-block 元素之间的 4-5px 小空隙。
10 calc（50%-自身一半）
返回列表
评论