【css 如何实现盒子垂直居中】
文章目录前言一、利用display:flex二、利用定位(常用方法,推荐)三、计算父盒子与子盒子的空间距离(这跟方法一是一个道理)四、利用display:table-cell五、利用transform六、利用calc计算
前言
由于flex布局的实用性和通用性,我们往往会忘记传统方法下如果去实现一个盒子脱离了flex后的“垂直居中”效果,所以本篇文章目的在于记录这些我们容易遗忘的小知识点。
一、利用display:flex
原理就是定位中心点是盒子的左上顶点,所以定位之后我们需要回退盒子一半的距离。
.
原创
2021-11-18 16:41:36 ·
137 阅读 ·
0 评论