最近总是碰到让图片上下居中的问题，左右居中直接设置

margin: 0 auto;就哦了，上下居中查了很多方法都行不通，多次试验最终有成功的两种方法总结下：

一种js实现，一种css实现：

一、js让图片上下居中：

  1.首先要知道你要显示图片的高度范围：div_height。

  2.由于获取图片高度前提是图片加载完毕，所以js函数调用不能用$(document).ready(),需要用$(window).load(function{……})，原因是前者加载完页面框架就会调用，而后者需要等所有页面元素包括图片加载完才调用。

  3.获取图片高度img_height。

  4.设置图片的 margin-top = ( div_height - img_height ) / 2。

示例：高度范围：220px

html：

<div class="box">
             <div class="photo_box">
                   <img src="..//photo/~Y[ZW)$@O]`RW_4LUGI@MWB.jpg" data-toggle="modal" data-target="#myModal"/>
                 </div>
   </div>

js：

$(window).load(function(){
 var img_height = $(this).height();
 var margin_top = (220 - img_height) / 2;
 $(this).css({"margin-top": margin_top + "px"});
 });   

二、html+css设置图片高度居中（假设包含图片的div高度为div_height = 600px,图片高度小于600px）

   1.给图片的父div（本文假设为600px）设置  

line-height: 600px;  // 图片在600px的高度上下居中，该高度可根据需求自行修改
display: table-cell;
vertical-align: middle;

   2.注意该父div的高度必须等于图片相对剧中显示的高度。

示例：

html：

<div class="carousel" data-ride="carousel">
               <div class="carousel-inner">
                   <div class="item">
                   <img src="1.png">
                   </div>
               </div>
         </div>

css：

.carousel {
height: 600px;
line-height: 600px;
display: table-cell;
vertical-align: middle;
}

height: 600px;
line-height: 600px;
display: table-cell;
vertical-align: middle;

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。