【css】让img图片居中显示

1.说明

想要点击一下居中展示一张图片，可以使用fixed布局，展示图片的时候背景呈半透明黑色，再点击即隐藏

2.代码

HTML

<div id="div_qr_img">
    <img id="img" src="" alt="">
</div>

css

#div_qr_img {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 100;
    display: none;
    background: rgba(0, 0, 0, 0.7);  /* 半透明背景 */
}

#img {
    width: 300px;
    height: 300px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    /* 图片宽度高度的一半才能居中 */
    margin-left: -150px;
    margin-top: -150px;
}

js，需要用到jQuery，自行引入

// Ajax请求之后显示结果
function showResult(response) {
    console.log(response)
    ...
    if (response["code"] == 3) { // 返回谷歌验证码图片
        $("#img").prop({
            "src": "data:image/png;base64," + response["base64"]
        })
        $("#div_qr_img").show()
    }
}
// 点击隐藏图片
$("#div_qr_img").click(function() {
    $("#div_qr_img").hide()
})