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]`[email protected]" 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：

.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;