方法一、使用display:table-cell
样式
<style> .wrapperbox{border:1px solid red; width:100px; height:100px; display:table-cell; font-size:0; text-align:center; vertical-align:middle; *position:relative;padding:0; overflow:hidden; } .innerbox{text-align:center; vertical-align:middle; width:100px\9; *width:auto;font-size:0; *position:absolute;*top:50%;*left:50%;} img{ max-height:100px; max-width:100px; *position:relative;*bottom:50%;*right:50%;margin:0 auto;} </style>html
<div class="wrapperbox"> <div class="innerbox"> <img src="demo.png" /> </div> </div>此方法div包括层过多； 兼容性：除IE 10及以下不兼容外，谷歌、360、火狐亲测兼容
方法二、使用绝对定位实现居中
样式
<style type="text/css"> .content { background: #dedede; width:500px; height:500px; position:relative; } .content div{ background: red; width:300px; height:300px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } </style>html
<div class="content"> <div>test</div> </div>兼容性：IE 8以上兼容、谷歌、360、火狐亲测兼容
方法三、使用绝对定位实现全屏居中
样式
<style> body{ margin:0px; width:100%; height:100%; } .box{ position:absolute; top:50%; left:50%; width:500px; height:200px; } .content{ position:relative; top:-50%; left:-50%; width:100%; height:100%; background:red; } </style>html
<div class="box"> <div class="content"> </div> </div>兼容性：全部兼容
方法四、使用display：flex
样式
<style> /*居中div的父级*/ .parent{display:flex;justify-content:center;align-items:center;} </style>兼容性：IE10及IE10以上、谷歌、360、火狐亲测兼容
