垂直居中方法

一、单行文本的话可以使用height和line-height设置同一高度。

二、弹性盒
1.父元素设置为弹性盒：display:flex;
2.给父元素加属性justify-content: center;
3、给父元素加属性align-items: center;

三、子绝父相 margin负值
1、子元素设置绝对定位position: absolute;，父元素设置相对定位position:relative；
2、上左两个方向都给50%：left:50%,top;50%;
3、margin-top:子元素高度的一半
margin-left:子元素宽度的一半
注意：有限制情况：当元素的宽或高为奇数时不能用

四、子绝父相 四方向
1、子元素设置绝对定位position: absolute;，父元素设置相对定位position:relative；
2、上下左右四个方向都给0：Top：0；left:0;bottom:0;right:0;
3、margin：auto；

五、子绝父相 平移
1、子元素设置绝对定位position: absolute;，父元素设置相对定位position:relative
2、上左两个方向都给50%:Top：0；left:0;
3、然后transform给-50%:transform: translate(0, -50%);
注意：有限制情况：当元素的宽或高为奇数时不能用

六、vertical-align：middle
当前元素水平居中 如果当前元素是img以外的其他类型必须先转成行内块元素
1、给目标元素设置一个参照物（为该目标元素的同级元素）
2、将参照物转成行内块元素，参照物与父元素一样高 height：100%
3、给目标元素和参照物均设置vertical-align：middle；(这一句可以解决图片间隙问题)
父元素：text-align:center;
参照物：display:inline-block;height:100%;vertical-align：middle；
自己：display:inline-block;vertical-align：middle；