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>