css 居中设置和图片白底处理

1.字体居中

1.1 字体水平居中

/* 只对文字有效 */
text-align: center;

1.2 字体垂直居中

/*设置height 和  line-height  相同高度*/
height: 55px;
line-height: 55px;

2.盒子居中

2.1 盒子水平居中

/* 盒子横向居中 */
margin: 0 auto;

2.2 盒子垂直居中

父盒子添加相对定位：

/* 父盒子添加相对定位：  relative*/

fatherbox {
  position: relative;
}

/* 子盒子添加绝对定位：  absolute */

childbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

2.3 flex 布局 垂直居中

/* 父盒子设置：  */
fatherbox {
  display: flex;
  justify-content: center;
  align-items: center;
}

 3.图片居中（因为图片对准基线，所以有白底，解决方法如下）

/* 图片对准顶部 底部 top，text-top，bottom，text-bottom */
img {
  vertical-align:top
}