居中图像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