CSS将图片居中显示在背景图上的几种方法（小白自己实践过程）

将一张图片放置在背景图上的居中方法 第一部分：在设置背景图时学到的东西：

1.在设置一个div时，如果用一张图作为这个div的背景时，会发现，这张图与设置div的大小不一致

2.当我没有给背景定义不平铺时background-repeat: no-repeat;这就会使图片显示不完整（超出或者缺失）。

加了不平铺的属性后，div中缺失的部分则会由空白填补。

此时我们则需要让图片自适应我们的div，加入如下代码

background-size:100% 100%;(当然也可以直接设置和div长度宽度保持一致)

第二部分：当我想把一张图放置在这个背景居中显示时，我又遇到了问题。

当我仅用text-align: center; 设置时发现，图片元素只能水平居中。而不能上下垂直居中。

通过查阅资料发现如下方法

方法1.使用line-height行高的方式设置图片居中

在外层div中设置 text-align:center;内层图片设置style=“line-height: 外层div高度”

<div style="width: 980px; height: 400px; background-color: yellow; text-align:center; margin: 0 auto;">
  <div style="line-height: 400px;"><img src="images/syt.jpg" style="width: 100px;height: 100px;"></div>
 </div>

利用定义文本的方法来放置图片。用line-height定义行高等于整个div的大小链接放在图片上层代码，实现垂直居中链接放在图片上层代码，但是我在实际运用的时候发现如果行高等于div的高度并不能完全实现图片对齐居中，我想应该是图片和文字的区别吧，真正做到对齐需要将行高加大为上层div高度加图片高度一半的大小。

测试了一下，内层的图片可以不用设置框架也可以，把line-height可以直接放在上层div中。

参考：

ine-height的用法

方法2.使用padding属性设置标签内边距，设置图片居中

<img src="images/syt.jpg" style="width: 100px;height: 100px; padding: 100px 0;">

使用padding属性设置图片上下内边距

panding的值为【（上层div高度-图片高度）/2】0；

方法3.把外层div转换成一个表格，内层图片转为单元格

利用display属性的值

table ：此元素会作为块级表格来显示

table-cell ： 此元素会作为一个表格单元格显示

来实现图片居中

css样式（部分代码）：

.ys{
display: table;
}
.qy{
 display: table-cell;
 vertical-align: middle;
}

效果如下：

使外层div变为一个table型，把图片所在内层容器变为一个单元格用vertical-align属性设置垂直对齐。（直接定义table也可以达到一样的效果）

参考：

display:table和display:table-cell的妙用

方法4.使用position精确定位

.qy{
 position: relative;
 top: 100px;
}

把图片放入div块中，然后使用相对定位，自定义图片的位置（这也是我第一个想到的方法，也最简单）

方法5.使用transform: translate(-50%,-50%)函数定位

.qy{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

把底层div设置为relative相对定位。再用top和left定位图片位置，但是此时我们定位的位置是图片左上角位于底层div的中心，我们是一张图片，当前不知道图片的大小，所以用transform: translate(-50%,-50%);属性使图片延x轴，y轴反向左上平移图片长和宽的一般，这样就完成了图片的定位。

可参考：transform用法

方法6.使用flex布局定义图片布局方式

只需要在上层div中加入

display: flex;
align-items: center;
justify-content: center; 

思想是把div改变为弹性盒子布局方式（CSS3新特性）

用justify-conten和align-itemst属性定义主轴方向和交叉轴方向上的居中对齐方式。

参考：flex布局方式

补充vertical-middle用法特殊：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。所以一般在使用该属性时，在父div中再加入一个块级元素，并变为行内元素。将width设为0，height设为100%达到撑开本行的目的。

总结：以上提到的方法不单单是可以用来定位图片，有些也可用于文字的定位，总体

感觉最方便的就是方法四，当然五六也算常见，方法三有些地方也会遇到。

（小白总结，可能有些地方说的有出入，希望大牛多多指点）