css实现水平居中

一、div中img水平居中：

{ 
  display:table;
  margin:0 auto;
}

二、img与span水平对齐:

{
  display: flex; 
  align-items:center;
}

三、div中div水平居中（不知宽度&设置position：absolute情况下）:
{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

四、div中span垂直居中：

{
  vertical-align: middle;
}

五、Flex弹性盒子：用flex实现垂直居中（父元素body，子元素main）
body{ 
  display:flex; 
  align-items:center; 
}
main{ 
  display:flex;
  align-items:center;
  justify-content:center; 
  flex-direction:column;
}

六、position：absolute 绝对定位：实现整体居中（已知宽高度情况下）

main { 
  position: absolute;
  width: 18em;
  height: 10em;
  top: 50%;
  left: 50%;
  margin-top: -9em; 
margin-left: -5em;

}