[TOC] ### 图片与文字会有空隙 原理是什么 #### 原因：将图片识别为文字，默认是基线对齐的，所以会有3px左右的偏差。 如何解决：将图片设为基线对齐 （vertical-align:pink） ~~~ <div> <span>杨洋</span> <img src="images/01.png" alt=""> </div> //css div{background:pink} img{ vertical-align:bottom } ~~~ ### 如何实现一个元素的垂直水平居中 ~~~ 1、给父元素相对定位，position，子元素绝对定位，left：50%，top：50%，margin-left为宽度的负50%，margin-top为高度的负50%。 2、给父元素相对定位，position，子元素绝对定位，left：50%，top50%，transform：translate（-50%，-50%）。 3、给父元素相对定位，position，子元素绝对定位，left：0，right：0，top：0，bottom：0，margin：auto。 4、flex布局 ~~~