以前一直设置水平居中，现在我们来讨论一下图片居中的四种小技巧

以前一直设置水平居中，现在我们来讨论一下图片居中的四种小技巧：
首先原码是这样的

 1  <style type="text/css">
 2         * {
 3             margin: 0;
 4             padding: 0;
 5         }
 6         .box {
 7             width: 200px;
 8             height: 200px;
 9             /* 设置盒子在浏览器中水平居中 */
10             margin: 50px auto;
11             border: 1px solid #000;
12         }
13         .box .pic {
14             /* 图片目前在盒子的左上角 */
15             width: 50px;
16             height: 50px;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="box">
22         <img class="pic" src="images/slide_01_640x340.jpg" alt="">
23     </div>
24 </body>
25 </html>

在浏览器中是这样显示的：
下面有四种方式使图片垂直居中
方式一：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              200px;
 3             height: 200px;
 4             /* 设置盒子在浏览器中水平居中 */
 5             margin: 50px auto;
 6             border: 1px solid #000;
 7             text-align: center;            
 8         }
 9         .box .pic {
10             /* 图片目前在盒子的左上角 */
11              50px;
12             height: 50px;
13         }
14         .box span {
15             height: 100%;
16              0;
17             display: inline-block;
18             vertical-align: middle;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="box">
24         <span></span>
25         <img class="pic" src="images/slide_01_640x340.jpg" alt="">
26     </div>
27 </body>

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

 1  <style type="text/css">
 2         * {
 3             margin: 0;
 4             padding: 0;
 5         }
 6         .box {
 7             width: 200px;
 8             height: 200px;
 9             /* 设置盒子在浏览器中水平居中 */
10             margin: 50px auto;
11             border: 1px solid #000;
12             text-align: center;
13         }
14         .box .pic {
15             /* 图片目前在盒子的左上角 */
16             width: 50px;
17             height: 50px;
18         }
19         .box:before {
20             content: "";
21             height: 100%;
22             width: 0;
23             display: inline-block;
24             vertical-align: middle;
25         }
26     </style>
27 </head>
28 <body>
29     <div class="box">
30         <img class="pic" src="images/slide_01_640x340.jpg" alt="">
31     </div>
32 </body>
33 </html>

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

 1  <style type="text/css">
 2         * {
 3             margin: 0;
 4             padding: 0;
 5         }
 6         .box {
 7             width: 200px;
 8             height: 200px;
 9             /* 设置盒子在浏览器中水平居中 */
10             margin: 50px auto;
11             border: 1px solid #000;
12             text-align: center;
13             display: table-cell;
14             vertical-align: middle;
15         }
16         .box .pic {
17             /* 图片目前在盒子的左上角 */
18             width: 50px;
19             height: 50px;
20         }
21     </style>
22 </head>
23 <body>
24     <div class="box">
25         <img class="pic" src="images/slide_01_640x340.jpg" alt="">
26     </div>
27 </body>
28 </html>

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