<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .undis{display: none;} .box{ 300px;height: 300px;margin: 0 auto;border: 1px solid #0000ff;position:relative;} /*1*/ .div1{position:absolute;300px;height:300px;background:red; left:50%;top:50%;margin-left:-50px;margin-top:-50px;} /*2*/ .div2{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;300px;height:300px;background:blue;} /*3*/ .div3{background:red;display:table-cell;vertical-align:middle;300px;height:300px; text-align:center;float: -left;/*添加浮动后垂直居中失效*/} .div3 img{display: block;margin: 0 auto; 50%;} /*4*/ .inner-table{display: table; 100%;height: 100%;} .div4{background:red;display:table-cell;vertical-align:middle;text-align: center} .div4 img{ 50%; margin: 0 auto;display: block;} /*5*/ .div5{ height: 300px;display:-webkit-box;-webkit-box-pack: center;-webkit-box-align: center;} .div5 img{display: block} /*6*/ .div6{300px;height:100px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background: red;} /*7*/ .divbox7:before{content: "";display: inline-block;height: 100%;vertical-align: middle;background: #000000;} .div7{display: inline-block;vertical-align: middle; 300px;background:red;} </style> </head> <body> <div class="div1 undis">position:absolute/fixed;均可</div> <div class="div2 undis">position:absolute/fixed;均可ie67不支持，适合移动端</div> <div class="box undis"> <div class="div3" ><img src="ma.jpg"> </div></div> <div class="box undis"><div class="inner-table"><div class="div4"><img src="ma.jpg"></div> </div></div> <div class="box undis"><div class="div5"><img src="ma.jpg"></div> </div> <div class="div6 undis"></div> <div class="box"> <div class="divbox7"><div class="div7">sd</div> </div></div> </body> </html>