web-css-gaoji-jichu.jpeg前言：爆破锤面试官的神器-无论是在实际开发中还是在求职面试中CSS都是垂直居中的它往往是绕不开的话题。很多面试官在被多次击中两次之后，并没有很好的反击点。他们只是结合了之前的恩怨和痛苦，给大家一记重锤。面试官老板的机会。其实垂直居中主要分为两种：一种是居中元素的宽高已知，一种是居中元素的宽高未知，下面我们就结合这两种来一一举例。css垂直居中。png中居中元素的宽高已知1.absolute+marginauto顾名思义就是使用position:absolute;每个方向的距离设置为0，此时设置margin为auto，实现垂直居中显示；具体代码如下：.parent{position:relative;宽度：90vw；身高：90vh；边框：3px实心钢蓝色；}.child{背景：番茄；宽度：50vw；高度：50vh；/*核心代码*/position:absolute;顶部：0；底部：0；左：0；右：0；margin:auto;}复制代码具体效果如下：image-20210729232149048.png2。absolute+negativemargin是通过使用50%的绝对定位百分比来实现的，因为当前元素的百分比是基于相对定位（即父元素）进行定位的；然后使用负的margin-top和margin-left进行简单的位移，因为当前负的margin是根据自身的高度和宽度来进行位移的。具体代码如下：.parent{position:relative;宽度：90vw；身高：90vh；border:3pxsolidsteelblue;}.child{背景：番茄;宽度：100px；高度：100px；/*核心代码*/position:absolute;顶部：50%；左：50%；边距顶部：-50px；margin-left:-50px;}复制代码具体效果如下：image-20210729232317142.png3。absolute+calc使用CSS3的一个计算函数进行计算即可；方法同上，具体代码如下：.parent{width:90vw;身高：90vh；边框：3px实心钢蓝色；/*核心代码*/position:relative;}.child{background:tomato;宽度：200px；高度：200px；/*核心代码*/position:absolute;顶部：计算（50%-100px）；left:calc(50%-100px);}复制代码，具体效果如下：image-20210729232434257.png居中元素宽高未知4.absolute+transform使用CSS3的新特性transform；因为如果transform的translate属性的值是一个百分比，那么这个百分比会根据自身的宽高来计算。具体代码如下：.parent{width:90vw;身高：90vh；边框：3px实心钢蓝色；/*核心代码*/position:relative;}.child{background:tomato;/*核心代码*/position:absolute;顶部：50%；左：50%；transform:translate(-50%,-50%);}复制代码具体效果如下：image-20210729232624466.png5。line-height+vertical-align将当前元素设置为行内元素，然后通过设置text-align:center实现水平居中；父元素；同时，通过设置vertical-align:middle实现垂直居中；当前元素的；最后设置行高：初始；当前元素的行继承父元素的行-height。具体代码如下：.parent{width:90vw;边框：3px实心钢蓝色；/*核心代码*/line-height:500px;文本对齐：居中；}.child{背景：番茄；/*核心代码*/display:inline-block;垂直对齐：中间；line-height:initial;}复制代码具体效果如下：image-20210729232748854.png6。table表格元素通过最经典的table元素实现水平居中和垂直居中，但是代码看起来很冗余，不推荐；具体代码如下：
