【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()})