img图片在父元素中居中的方法

如果可以，可以如果

已于 2022-05-12 09:46:05 修改

阅读量1.1w

点赞数 16

于 2021-06-24 16:44:50 首次发布

本文链接：https://blog.csdn.net/qq_43687594/article/details/118190839

版权

一般情况下，说到居中显示，最常见的办法应该就是margin：auto；、text-align：center；、line-height的设置，但是对于图片img来说，这个办法实在是不好用。文本在标签中水平垂直居中有n种办法，可是刚刚发现，图片的垂直居中是不能用行高解决的，所以该文章就是记录图片在元素中无法居中显示的问题。

该方法不仅可以解决图片居中问题，且适用于多行文本居中，那就是设置空标签。
初始代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 400px;
            border: solid 1px red;
            margin: 50px auto;
        }
    </style>
</head>
<body>
        <div>
            <img src="./../img/boy.png" alt=""><span></span>
        </div>
</body>
</html>

初始图中可以看到，图片默认在左上角的位置，既不水平居中也没有垂直居中。
初始效果图如下：

具体实现步骤：

先给父元素设置text-align:center;使得图片可以水平居中显示。
给需要设置居中的元素，利用display: inline-block;转换成行内块元素，再添加垂直居中属性vertical-align: middle;
此时还需要添加标尺，即参照物。也就是添加一个与img的同辈元素，一般情况下常使用span标签，其他的同辈元素也可以，但是需要注意同辈元素和img标签中间不能有任何内容、空格或者回车。
最后，需要给标尺标签设置以下属性：
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 400px;
            border: solid 1px red;
            margin: 50px auto;
            text-align: center;
        }
        div img{
            display: inline-block;
            vertical-align: middle;
        }
        div span{
            display: inline-block;
            width: 0;
            height: 100%;
            vertical-align: middle;
        }
    </style>
</head>
<body>
        <div>
            <img src="./../img/boy.png" alt=""><span></span>
        </div>
</body>
</html>

最终实现效果图：