css实现水平垂直居中

//方式一
#container{
  position:relative;  
}
#center{
  position:absolute;
  width:100px;
  height:100px;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  //margin:-50% 0 0 -50%    
}
//方式二
#container{
  display:flex;
  justify-content:center;
  align-items:center;  
}
//方式三
#container{
    text-align: center;
    width: 500px;
    height:200px; 
    ine-height:200px; 
}
#center{
    display: inline-block;
    vertical-align: middle;
}
//方式四 //使用display:table实现（不兼容ie6/7）
<div style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;">
    <span style="display: table-cell; vertical-align: middle; ">
        <img  src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-    block;" />
    </span>
</div>