• 如果是图片,直接设置 img 的属性 vertical-align: middle;前提是需要设置父级元素
为块级元素并且设置高度
• 如果是单行文本,可以通过设置子元素的 line-height 值等于父元素的 height,这种
方法适用于子元素为单行文本的情况。
16
• 通过定位父元素 position: relative 子元素 position: absolute top:50%; transform:
translateY(-50%);
• 通过伪元素:before 实现 CSS 垂直居中
父元素:before{
content:"";
display:inline-block;
vertical-align:middle;
height:100%;
}
• 通过 display:table 实现,给父元素设置 display:table,子元素 display: table-cell 的
方式实现 CSS 垂直居中
• 通过 display:flex 实现,给父元素设置 display:flex; 子元素 align-self:center