如何垂直居中圖像？

Question

我正在尋找一種垂直居中圖像的方法，與text-align center類似。由於您不需要指定父級的寬度或子級的寬度，因此中心效率會比較高，因此會自動將其中的內容居中。有沒有其他的方式來做這樣的垂直定位圖像？

Answer 1

您可以通過使用display: table-cell

div { 
    display: table-cell; 
    height: 100px; 
    border: 1px solid #f00; 
    vertical-align: middle; 
} 

Demo

---

方式2，使用position: absolute;並做2種方式

路1（首選） top: 50%和在父DIV ID parentDiv ..設置的圖像使用margin-top

div { 
    height: 100px; 
    border: 1px solid #f00; 
    position: relative; 
} 

div img { 
    position: absolute; 
    top: 50%; 
    margin-top: -24px; /* half of total height of image */ 
} 

Demo 2

Answer 2

div{ 
    display:table-cell; 
    vertical-align:middle; 
} 

Answer 3

在背景

#parentDiv 
{ 
background:url(image.png) no-repeat center center; 
height:500px; 
width:500px; 
} 

或孩子比扣除圖像的總height的1/2 div做這件事...

position:absolute; 
    top:50%; 

Answer 4

所有中間...

<div id="container"> 
    <div id="img"></div> 
</div> 

#container { 
    position: relative; 
    width:200px; 
    height:200px; 
    background:#040; 
} 
#container #img { 
    background: url("url_to_image.jpg") no-repeat center center; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
} 

http://jsfiddle.net/djwave28/PD6J4/

Answer 5

你有舊的瀏覽器，但在不久的將來（現在有喜歡的瀏覽器支持的70％），你可以工作的解決方案做到這一點，一個更簡單和優雅的解決方案：

.container img{ 
    width: 100%; 
    height: auto; 
} 
@supports(object-fit: cover){ 
    .container img{ 
     height: 100%; 
     object-fit: cover; 
     object-position: center center; 
    } 
}