//方式一#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> ???????
css实现水平垂直居中
原文地址：https://www.cnblogs.com/xuanbingbingo/p/8872625.html