如何设置图片、文字在容器（div）中垂直居中的显示？

1、设置文字在div 容器中垂直居中显示

<div style="border: 1px #f00 solid;height: 200px;width: 60%;text-align: center;line-height: 200px;">
    <span>文字垂直居中</span>
</div>

2、设置图片在div 容器中垂直居中显示

<div style="border: 1px #f00 solid;height: 200px;width: 60%;text-align: center;line-height: 200px;">
    <img src="http://img5.imgtn.bdimg.com/it/u=3778965389,999130720&fm=27&gp=0.jpg" width="50%" height="50%" style="vertical-align: middle;"/>
</div>

到此为止。以上两个实现的方法，不管哪种方法。代码也只是实现功能的一种手段。前端小生曾经也为这个问题费劲周折。空闲时间也为记载一些基础的技能。或许没有必要去熟知功能的实现以及实现的原理。

3、推荐：使用Flex 布局居中

<div style="border: 1px #f00 solid;height: 200px;width: 60%;display: flex;justify-content: center;align-items: center;">
	<img src="http://d.hiphotos.baidu.com/image/h%3D220/sign=8615ce04df39b60052ce08b5d9523526/b58f8c5494eef01fa9f2d522eafe9925bd317d77.jpg" width="50%" height="50%"/>
</div>

4、推荐：设置绝对定位和元素的偏移量。

<style>
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
</style>