居中圖像div

Question

我想在創建的div中居中一個圖像。我在這裏錯過了什麼？我試圖在圖像上添加一種風格，但那也沒有奏效。

http://jsfiddle.net/huskydawgs/8zs29/

<div class="wrapper-data"> 
<div class="data_row"> 
    <div class="data_cell1_100"> 
     <img width="450" height="509" src="http://oedblog.electricstudiolt.netdna-cdn.com/wpcms/wp-content/uploads/apple-e1382039006457.jpg" /></div> 
    </div> 

.wrapper-data { 
position:relative; 
width:100%; 
border: none; 
margin: 30px 0 0 0; 
overflow: hidden; 

}

.data_row { 
    height:100%; 
    min-height:100%; 
    white-space:nowrap; 
    display:table; 
} 

.data_cell1_100 { 
    width:100%; 
    display:table-cell; 
    white-space:normal; 
} 

.data_cell1_100 img { 
    display:block; 
    margin: 0 auto; 
} 

Answer 1

.data_row也需要width:100%;

DEMO http://jsfiddle.net/8zs29/1/

原因：簡短和友好，百分比寬度是相對於父元素，您需要「傳遞它」到您的目標元素。因此，如果您打算將最外面的元素的寬度設爲100％，那麼在您的情況下，使用100％的視口來確定所有寬度的主體，那麼所有前面的元素應該具有100％的寬度。

Answer 2

添加width:100%;與類.data_row