Есть ли более эффективный способ центрирования изображения внутри плавающего div

Question

Мне было интересно, был ли более эффективный способ центрировать изображение внутри плавающего div по сравнению с моим. Прямо сейчас я настроил его так, чтобы изображение помещалось внутри p и центрировало p. Увидев, что дополнительный p-тэг слишком раздражает меня :(Я все-таки могу сосредоточить img сам по себе? Спасибо, я перечислил то, что у меня сейчас внизу. Редактировать: он должен быть вертикальным и горизонтальным!

HTML

<div class="filler"><p><img src="images/qualGraphic.png" width="578px" height="256.72px" alt="Quality"/></p></div> 

CSS

.filler { 
    display:table; 
    width:65.6%; 
    height:300px; 
    background-color:#000; 
    display: table; 
    float:left; 
} 
.filler p { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

Answer 1

Для центровки по горизонтали и по вертикали попробуйте добавить это к изображению.

img { 
    display: block; 
    position: absolute; 
    margin: auto; 
    top:0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

элемент вокруг изображения должен быть расположен относительно т.е.

position: relative 

Вот пример с изображением внутри перемещаемого элемента

http://jsfiddle.net/xYEuS/

Answer 2

Просто добавьте свойство text-align:center CSS в .filler класс. img является встроенным элементом, так что сконцентрируется согласовывая в text-align собственности.

JS Fiddle:http://jsfiddle.net/CgJZ4/