用css实现绝对居中和怎么更简洁居中一个img,解决img留白

第一种：  伸缩盒子，要定义在父类

            display: flex;
            justify-content: center; //水平居中
            align-items: center;//垂直居中

注意：不能加margin，否则无效，padding（是否能加？）

第二种：不知道盒子长宽：（比较好）

垂直水平居中：top、right、bottom、left全为0， margin: auto;
给父盒子相对定位，position: relative;
给子盒子绝对定位，position: absolute;

第三种：知道盒子长宽
父元素相对定位
子元素绝对定位
left: 50%;top: 50%;
margin-left: 负的子盒子宽度一半。
margin-top: 负的子盒子高度一半；

第四种：使用css3 translate属性，使用的是偏移量

给父盒子相对定位，position: relative;
给子盒子绝对定位，position: absolute;

子盒子：

left: 50%; top: 50%; transform: translate(-50%,-50%);

第六种：

设置盒子外边框，使外盒子居中，左右外边框值相等（长度未知）
水平居中:在div的position为relative（相对定位时有效，绝对定位无效）

水平居中：给div设置一个宽度，然后添加margin:0 auto属性

 div{
 	width:200px;
 	margin:0 auto;
  }

更简洁地居中一个img:

display:table-cell;
text-align:center;
vertical-align:middle;

注意：img出现底部留白问题

解决方式：

1.把img设置成display: block 或  vertical-align: bottom;
2.给父元素line-height: 5px；或font-size:0