垂直居中方案总结

时间：2023-03-30 16:07:54 CSS

.outer1{位置：相对；}.inner1{位置：绝对；顶部：50%；边距顶部：-40px；高度：80px；}点此链接直接看效果：http://www.zhouyangyang.com/c...这是公共样式.outer{width:150px;高度：200px；背景：粉色；border:1pxsolidpink;}.inner{background:#77BFCD;}1、负边距父元素位置相对，子元素位置绝对，top50%，margin-top为负元素高度/2。缺点：只能在子元素高度固定的情况下使用，计算麻烦。.outer1{位置：相对；}.inner1{位置：绝对；顶部：50%；边距顶部：-40px；高度：80px；}

第一行

第二行

2,css3calc()和上面的没有关系不同的是子元素的高度必须固定，手动除以2。但是你可以节省一行margin-top。.outer2{位置：相对；}.inner2{位置：绝对；顶部：计算（50%-40px）；高度：80px；}

第一行

第二行

3,translateYmargin-top百分比形式是相对于元素包含块的宽度，所以上面的方法都得手动除以2。translateXtranslateY的百分比是相对于元素本身的宽高。这种方法在子元素高度不确定的时候可以使用，不需要手动除以2，比上面的方便多了。在某些浏览器中，如果变换后宽高的像素不是整数，会导致显示模糊，可以通过transform-style:preserve-3d修复。.outer3{位置：相对；}.inner3{位置：绝对；顶部：50%；变换：翻译Y(-50%)；}

第一行

第二行

4,marginauto,toprightleftbottom都是0可以上下左右居中，超级方便，也是我在项目中用的最多的。但这只能在元素设置了宽度和高度时使用。.outer4{位置：相对；}.inner4{位置：绝对；顶部：0；右：0；底部：0；左：0；保证金：自动；宽度：100px；高度：80px；}

第一行

第二行

上面是基于绝对定位的解决方案，还有其他解决方案。5.表格布局父元素显示table-cell，virticl-alignmiddle，子元素显示table。.outer5{显示：表格单元格；垂直对齐：中间；}.inner5{显示：表格；}

第一行

第二行

6,inlineblock方法设置子元素为display:inline-block,vetical-align:middle，父元素的行高等于高度，缺点是只能在父元素的高度时使用元素是固定的。.outer6{line-height:200px;}.inner6{显示：内联块；垂直对齐：中间；高度：80px；行高：1；}

第一行

第二行

7,另一行block方法给父元素一个:before伪子元素,让伪元素height:100%,然后让伪子元素和真实子元素都显示:inline-blockvetical-align：中间。.outer7:before{内容：'';显示：内联块；高度：100%；垂直对齐：中间；}.inner7{显示：内联块；：中间;}

第一行

第二行

上一篇：简单四步，学会在数字孪生可视化场景中制作小地图！

下一篇：动人的CSS3世界

垂直居中方案总结相关文章