如何让div中的图片垂直居中对齐?

div高度确定，图片是随机调取的，大小不确定，如何让图片在div中垂直对齐呢？

举报该文章

相关建议推荐于2018-05-20

图片水平垂直居中情况很多，最简单的办法是吧图片设置为背景，给背景设置background-position:center;

如果只能用图片

分两种情况：
1.图片宽高固定，这种情况很简单。
水平居中：就在图片的css中加 dispaly:block;margin:0 auto;

垂直居中：自己算出（div的高度-图片的高度）/2，得到margin-top值即可。

2.图片高度未知，这个布局比较难实现。一般我是用js做的。
水平居中：同上，在图片的css中加 dispaly:block;margin:0 auto;
垂直居中：用js算出（div的高度-图片的高度）/2，得到margin-top值赋给它。

曾经研究过网上的很多方法，个人觉得这个是最有效的了。

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/28sf42p8s.html

其他看法

第1个回答推荐于2017-11-25

给div设定text-align:center;可使图片水平居中，再给图片img设定 vertical-align:middle;即可达到垂直居中（切记，是给图片加，不是div，很多人容易搞错）

还有一个方法，就是用table布局，td默认是水平方向居左的，但是垂直方向是居中的，所以你套一个table后再插入图片的话，也能很好的达到垂直居中本回答被提问者采纳

第2个回答 2013-03-22

表格不太好,但我觉得不妨用用,要不你在div里面加个table,宽度100%,一行一列,图片放里面,然后用valign属性试试
<td valign="middle"></td>

第3个回答 2013-03-22

一楼说的对,设置背景最简单，垂直居中的话，应该设置行高也能解决。比如：div为height 50px
line-height:50px ,text-align:center . display:block.

第4个回答 2013-03-24

Vertical-align:center;

相似回答

大家正在搜