vertical-align middle 不生效的几种解决方式，图片居中几种方案

1.在父元素中增加display:table-cell，vertical-align 写在在父元素中

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.btn{     display: table-cell;     width: 200px;     height: 200px;     border: 1px solid #eee;     text-align: center;     vertical-align: middle; }   .btn img{    width: 100px; }   <div class="btn">     <img src="img/sh.png"> </div>

 

2.在父元素中增加空的span元素，并设置其高度为100%，vertical-middle居中

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.btn{     width: 200px;     height: 200px;     border: 1px solid #eee;     text-align: center; }   .btn span{     display: inline-block;     vertical-align:middle;     height: 100%; }   .btn img{    width: 100px;    vertical-align: middle; }   <div class="btn">     <span></span>     <img src="img/sh.png"> </div>

3.父元素line-height 100% 和子元素vertical-align:middle

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.btn{       width: 200px;     height: 200px;     line-height: 200px;     text-align: center;     border: 1px solid #eee;   } .btn img{    vertical-align: middle;     width: 100px; }   <div class="btn">     <img src="img/sh.png"> </div>

 

4.采取display:flex居中

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.btn{       width: 200px;     height: 200px;     border: 1px solid #eee;       display: flex;     justify-content:center;     align-items: center; } .btn img{     width: 100px; } <div class="btn">     <img src="img/sh.png"> </div>

5.绝对定位

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.btn{       width: 200px;     height: 200px;     border: 1px solid #eee;       position: relative;   } .btn img{     width: 100px;     height: 100px;     position: absolute;     left: 50%;     top:50%;     margin-left: -50px;     margin-top: -50px; }   <div class="btn">     <img src="img/sh.png"> </div>

6.背景图

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.btn{       width: 200px;     height: 200px;     border: 1px solid #eee;       background-image: url(img/sh.png);     background-size: 50%  50%;     background-position: center center;     background-repeat: no-repeat;   }   <div class="btn">   </div>