作者:潇湘V烟雨 | 来源:互联网 | 2023-07-01 19:14
通过vertical-align:middle注意:vertical-align:middle生效的元素必须是 display:inline-block;且必须有一个兄弟元素做参照
通过vertical-align: middle
注意:vertical-align: middle生效的元素必须是 display: inline-block;且必须有一个兄弟元素做参照(其原理是寻找兄弟元素中最高的元素做参照让自身的中点高度和参照的中点高度对齐)
View Code
class=
"box1">
class="box2">
class="box3">
通过display: flex
注意:给父元素display: flex;给目标元素align-self: center
class=
"box1">
class="box2">
通过line-height
注意:此方法以只父元素height,然后让目标元素的line-height等于父元素height;适用于目标元素为文本的时候
class=
"box1">
class="box2">123456
通过transform和绝对定位
注意:此时未知父元素高度;那么就需要先将元素定位到容器的中心位置,然后使用 transform 的 translate 属性,将元素的中心和父容器的中心重合,从而实现垂直居中:
class=
"box1">
class="box2">