您的位置：首页 > Web前端 > CSS

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

2017-12-05 09:42 816 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  图片-文字垂直居中 css垂直居中
相关文章推荐
新的分享
章节导航