居中：让图片在div中几种方式-原创手记-慕课网

方法一：`vertical-align: middle;`

先设置一个div包含一个a标签和img标签

<div>    <a href="https://www.jianshu.com/u/2f326b555fe5"></a>
    <img src="image404.png" alt=""></div>

让div在页面居中，此处用了用绝对定位position:absolute为了解决浏览器兼容问题，比如safari里面就会出现边缘间距空白

<style type="text/css">
         div{ 
         width:100%; 
         height:100%; 
         position:absolute; 
         left:0; 
         top:0; 
         text-align:center;
          }         div img{ 
                  border:0;                  width:700px;
          }</style>

此处div加上一个vertical-align:middle能让图片垂直居中，结果一点效果也没有。但是加上text-align:center的话，可以让里面的img水平居中，但vertical-align却不能这样子用。
我的第一种做法是：可以在div里面加一个span空标签，把它的高度设为100%，再给它一个vertical-align:middle样式，同样地给img一个vertical-align:middle样式，那么img就可以在div里面垂直居中了。

<head>
    <meta charset="UTF-8">
    <title>换肤效果</title>
    <style>
        *{            margin: 0;            padding: 0;
        }        div{            width: 100%;            height: 100px;            background: yellow;            text-align: center;            vertical-align: middle;
        }        div img{            height: 80px;            vertical-align: middle;
        }        body{            background: url("images/hanguo1.jpg");
        }        div span{            vertical-align: middle;            display: inline-block;            height: 100px;
        }    </style></head><body>
    <div>
        <span></span>
        <img src="images/gufen1.jpg" alt="">
        <img src="images/gufen4_400x400.jpg" alt="">
        <img src="images/gufen5.jpg" alt="">
        <img src="images/gufen3.jpg" alt="">
        <img src="images/gufen2.jpg" alt="">
        <img src="images/hanguo2.jpg" alt="">
        <img src="images/hanguo3.jpg" alt="">
        <img src="images/纯阳.png" alt="">
        <img src="images/hanguo4.jpg" alt="">
        <img src="images/苍云.png" alt="">
    </div></body>

这里我设置页面背景为图片平铺效果，效果如下：

webp

图片.png

方法二：`vertical-align：middle`

vertical-align属性只对行内元素有效，对块内元素无效！将display属性设置为table-cell，将块元素转化为单元格，然后加上vertical-align：middle，也可以实现这样的效果。

方法三：`line-height`

设置行高line-height,但是要注意，与父元素的高度一致，要与div的高度一致，但是小图片会被拉伸，大图片设置行高不会使的图片变小，大图片设置img的高度即可。

方法四：子绝父相

未知宽高的图片可以这样写，但是下面代码只能设置单张图片，多张图片还可以做变动，比如通过浮动来定位其他图片等

div{         width: 100%;         height: 100px;         background: yellow;         position: relative;
        }div img{        height: 80px;        position: absolute;        left: 0;        right: 0;        bottom: 0;        top: 0;        margin: auto;
        }

已知图片宽高的：通过计算可以获得，可以设置多张图片

    div{            width: 500px;            height: 500px;            background: yellow;            position: relative;
        }   div img{            width: 200px;            height: 200px;            position: absolute;            left: 50%;            top: 50%;            margin-left:-100px;            margin-top: -100px;
           }

还有其他的方式，这里仅仅是用了css的一些方法

作者：Left左
链接：https://www.jianshu.com/p/90cf14afb5d5