当前位置：首页 > Web前端 > CSS

CSS垂直居中的10种实现姿势

时间：2023-03-31 11:44:41 CSS

前言元素居中是前端开发中最常见也是使用频率最高的css技巧。不仅在开发中经常用到，面试官提问的时候有时也会问到这种问题。本文主要介绍垂直居中的10种方法。希望它对你和我都有帮助。1、line-height+height的实现如果子元素是行内文本元素，只要将父元素的高度设置为与line-height的高度相同，就可以垂直居中。HTML我是内联元素

CSS.parent{height:200px;宽度：200px；行高：200px；background:#fcc;}.child{background:#f66;}效果图：2.flex+align-items实现flex布局可以实现一行或多行元素的垂直居中，只需使用align-items:center。HTMLflexcentered

CSS.parent{height:200px;宽度：200px；显示：弹性；对齐项目：居中；背景：#fcc;}.child{背景：#f66;width:180px;}效果图：3.table-cell+vertical-align的实现使用table布局的vertical-align:middle属性可以实现子元素的垂直居中。HTML使用表格垂直居中

CSS.parent{height:200px;宽度：200px；显示：表格；}.child{背景：#f66；垂直对齐：中间；display:table-cell;}效果图：4.absolute+negativemargin(已知高宽)通过绝对定位将元素定位到距顶部50%的位置，设置margin-top使元素高度向上偏移一半可以实现对中。HTML绝对+负边距CSS.parent{height:200px;宽度：200px；位置：相对；背景：#fcc；}.child{背景：#f66；高度：50px；位置：绝对；顶部：50%；边距顶部：-25px；width:180px;}效果图：5.垂直居中时的absolute+transform（已知高度和宽度）当元素的高度和宽度未知时，可以使用CSS3中的transform属性将Y轴偏移50%到实现垂直居中。但是存在兼容性问题。HTML绝对+转换CSS。父母{高度：200px;宽度：200px；位置：相对；背景：#fcc；}.child{背景：#f66；位置：绝对；顶部：50%；变换：翻译Y(-50%)；width:180px;}效果图：6.absolute+calc的实现也要求居中元素的宽高必须固定，利用css3的ca'lc计算属性，top的百分比以左上角为准的元素，然后使用top百分比减去一半的宽度就可以垂直居中了。HTMLabsolute+calcCSS。父母{高度：200px;宽度：200px；位置：相对；背景：#fcc；}.child{背景：#f66；高度：50px；宽度：180px；位置：绝对；顶部：计算（50%-25px）；width:180px;}效果图：7.absolute+margin:auto实现绝对定位，然后设置top:0,bottom:0,margin:auto实现居中。HTMLabsolute+margin:autoCSS。父母{高度：200px;宽度：200px；位置：相对；背景：#fcc;}.child{背景：#f66;高度：50px；宽度：180px；位置：绝对；顶部：0；HTML内边距实现CSS.parent{width:200px;填充：80px0；背景：#fcc;}.child{背景：#f66;高度：80px；宽度：180px；line-height:80px;}效果图：9.flex+flex-direction这个方法也是先给父元素设置display:flex，然后改变主轴的方向flex-direction:column，最后实现通过justify-content:center垂直居中。HTMLflex+flex-direction实现CSS.parent{width:200px;高度：200px；显示：弹性；弹性方向：列；证明内容：居中；背景：#fcc;}.child{背景：#f66;高度：80px；宽度：180px；line-height:80px;}效果图：10.Grid实现HTMLGrid实现CSS.parent{width:200px;高度：200px；显示：网格；background:#fcc;}.child{background:#f66;}.child1{background:#fcc;}效果图：最后，如果喜欢，欢迎收藏关注。更多优质文章，请访问GitHub博客。欢迎来到星！！！参考文章Howtocenteranelement(finalversion)CSS垂直居中的12种实现

上一篇：前端性能优化指南

下一篇：一篇关于BEM命名规范的文章

CSS垂直居中的10种实现姿势相关文章

最新推荐

猜你喜欢