一张图片在背景图中居中显示

１．知识点：
（１）图片水平居中显示https://zhidao.baidu.com/question/537179073.html

看这个的回答　　　我用的是第二种方法

（２）有关于background属性的知识点：http://css.doyoe.com/（这个是ｃｓｓ参考手册　打开页面后按Ctrl＋Ｆ 然后在搜索框搜索background按Enter键即可查找）

2.实现
< !DOCTYPE html>
< html lang=“en”>

< head>
< meta charset=“UTF-8”>
< meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
< title>Document< /title>
< style>
.parent {
width: 100%;
height: 400px;
border: 1px solid red;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: left top;
/* 将元素宽度设置为100% 则背景图像使用background-size设置为cover 覆盖全部 */
background-size: 100% 100%;
position: relative;
}
img {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
< /style>
< /head>

< body>
< div class=“parent”>
< img src=“2.jpg” alt="">
< /div>
< body>

< /html>

结果：