## 垂直水平居中的方法有几种？ ### （一）vertical-align：middle 当前元素水平居中 如果当前元素是img以外的其他类型必须先转成行内块元素 1、给目标元素设置一个参照物（为该目标元素的同级元素） 2、将参照物转成行内块元素，参照物与父元素一样高 height：100% 3、给目标元素和参照物均设置vertical-align：middle；(这一句可以解决图片间隙问题) ### （二）子绝父相 四方向 1、子元素设置绝对定位，父元素设置相对定位 2、上下左右四个方向都给0 3、margin：auto； ### （三）子绝父相 margin负值 1、子元素设置绝对定位，父元素设置相对定位 2、上左两个方向都给50% 3、margin-top:子元素高度的一半 margin-left:子元素宽度的一半 注意：有限制情况：当元素的宽或高为奇数时不能用 ### （四）子绝父相 平移 1、子元素设置绝对定位，父元素设置相对定位 2、上左两个方向都给50% 3、然后transform给-50% 注意：有限制情况：当元素的宽或高为奇数时不能用 ### （五）弹性盒 1、父元素设置为弹性盒 2、给父元素加属性justify-content: center; 3、给父元素加属性align-items: center;