Как я могу центрировать это изображение по вертикали и по горизонтали?

Question

У меня есть коробка, которая является переменной шириной и высотой. В моем примере я хочу сосредоточить изображение на полпути. Каков наилучший способ приблизиться к этому только с помощью CSS? Я бы предпочел не использовать JavaScript, если мне это не нужно.

Пример по адресу: http://codepen.io/wesbos/pen/Ehour

мой HTML:

<div class="box"> 
    <img src="http://placekitten.com/200/200"> 
</div> 

Мой CSS:

.box { 
    width:400px; 
    height:400px; 
    border:1px solid red; 
    text-align:center; 
} 

Answer 1

Вы могли бы сделать DIV table-cell, а затем использовать vertical-align свойство:

.box { 
    width:400px; 
    height:400px; 
    border:1px solid red; 
    text-align:center; 
    vertical-align:middle;  
    display: table-cell; 
} 

img{ 
    display: inline-block; 
} 

Answer 2

Простейший способ это просто сделав изображение в качестве фона для DIV по центру и не повторять значения и без необходимости использовать атрибут выравнивания текста, вот как:

HTML

<div class="box"> 
</div> 

CSS

.box { 
    width:400px; 
    height:400px; 
    border:1px solid red; 
    background:url(http://placekitten.com/200/200) no-repeat center center; 
} 

вы можете заменить ссылку на URL() с изображением вы хотите либо на локальной машине, или ссылку на изображение на веб-сервере, как один выше