实现垂直居中的五种方法

时间：2023-03-30 14:44:36 CSS

实现垂直居中的几种方法（按场景介绍）line-height（包裹行内元素）123456788

12345555

.wrap{高度：100px；line-height:100px;}效果图vertical-align:middle(wrapin-lineblock-levelelements)

.wrap{高度：100px；边框：1px实心#000；底部边距：10px；}.child{边框：1px纯红色；高度：50px；宽度：200px；}.wrap::after,.child{显示：内联块；垂直对齐：中间；}.wrap::after{内容：'';高度：100%；}效果图flex结构align-itemsblock

inline-block内联.wrap{显示：弹性；对齐项目：居中；高度：100px；边框：1px实心#000；底部边距：10px；}.child{边框：1px纯红色；高度：50px；宽度：200px；{显示：内联块；高度：30px；}效果图position+transformblock.wrap{position:relative;}.child{position:absolute;顶部：50%；变换：translateY(-50%);}tabletable-ceiltable-ceil

block

。wrap{显示：表格；}.child{显示：表格单元格；宽度：500px；vertical-align:middle;}注意：如果容器的高/宽设置为height/width，再设置child的height/width无效，即child会自动填充高和宽包装;如果wrap没有设置height/width，wrap会自适应child的实际宽高

上一篇：再学学CSS

下一篇：webRTC.io---服务器端带你进入即时通讯的世界——从使用到完整的逐行源码解析

实现垂直居中的五种方法相关文章