怎么让一个元素垂直居中

• 如果是图片，直接设置 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

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容