• 以前一直设置水平居中，现在我们来讨论一下图片居中的四种小技巧：
  首先原码是这样的
  1  19 20 21     
         
          22         
          23     
         
  24 25 

  在浏览器中是这样显示的：

  下面有四种方式使图片垂直居中
  方式一：text-align： center；line-height = height; vertical-align: middle (vertical-align只能作用与行内块及表格标签)。设置完这三个属性后，图片即可垂直居中啦，让我们来看一下效果吧！
  1         .box { 2             width: 200px; 3             height: 200px; 4             /* 设置盒子在浏览器中水平居中 */ 5             margin: 50px auto; 6             border: 1px solid #000; 7             /* 新加的属性 */ 8             text-align: center; 9             line-height: 200px;10             vertical-align: middle;11         }

  浏览器中的图片已经居中啦！但是这种方式不灵活，如果要改动变量的话就会给后面工作增加负担

  方式二：给父盒子中添加一个参照标签 比如<span></span>,代码如下：
  1  .box { 2             width: 200px; 3             height: 200px; 4             /* 设置盒子在浏览器中水平居中 */ 5             margin: 50px auto; 6             border: 1px solid #000; 7             text-align: center;             8         } 9         .box .pic {10             /* 图片目前在盒子的左上角 */11             width: 50px;12             height: 50px;13         }14         .box span {15             height: 100%;16             width: 0;17             display: inline-block;18             vertical-align: middle;19         }20     21 22 23     
         
          24         
          25         
          26     
         
  27 

   

  方式三：给父元素加伪元素：：before或：：after  原理同方式二   看代码：

  1  27 28 29     
         
          30         
          31     
         
  32 33 

  方式四： 最牛掰的一种，最棒的一种：设置父盒子的显示模式为display： table-cell；和vertical-align：middle；就可以解决了，有没有很神奇？

  1  22 23 24     
         
          25         
          26     
         
  27 28 

   看到这里，小伙伴们还不动手试一试吗？