html和js图片上下居中的两种方法

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

1. 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）设置

     

1. line-height: 600px;  // 图片在600px的高度上下居中，该高度可根据需求自行修改
2. display: table-cell;
3. 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：

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

1. 
   

1.    

1. height: 600px;
2. line-height: 600px;
3. display: table-cell;
4. vertical-align: middle;