此方法受限于图片的高宽,必须为已知的。
html
<div class="box"> <img src="./101.jpg"/> </div>
css样式
.box { border: 1px solid red; width: 200px; height: 200px; position: relative; } .box img { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; }
<div class="box"> <img src="./101.jpg" /> </div>
css样式
.box { border: 1px solid red; width: 200px; height: 200px; line-height: 200px; text-align: center; } .box img { width: 100px; height: 100px; vertical-align: middle; }
html
<div class="box"> <img src="./101.jpg" alt=""> </div>
css样式
.box { width: 250px; height: 250px; border: 1px solid red; /*主流浏览器的居中*/ display: table-cell; vertical-align: middle; text-align: center; /* 以下为了兼容IE7及以下,目前多数网站不需要*/ *display: block; *font-size: 300px; /*约为高度的0.873,200*0.873 约为175*/ *font-family: Arial; /*防止非utf-8引起的hack失效问题,如gbk编码*/ }