Как выровнять изображение по высоте внутри div?

[shurik_shink]

Вопрос: Как правильно установить vertical-align: middle; для <img>

Не удается выровнять изображение по центру.
В интернете есть сведения что для того что бы выровнять по центру элемент необходимо задать стили:
для parent{display: table;}
для child{display: table-cell; vertical-align:middle}
Но для изображения это не работает

Подскажите кто знает - как правильно разместить изображение по высоте четко по центру родительского div?

<style>
div#div1{
	display: table;
 	border: 1px solid green;
 	width: 100%;
	height: 300px;
	background-color: yellow;
	text-align: center;
}

img#img1{
	display: table-cell;
	height: 100px;
	vertical-align: middle;
}
</style>

<div id="div1">
<img id="img1" src="http://politrussia.com/upload/iblock/032/032e40743dba6b8e0ec37a7df1f89889.jpg"/>
</div>

[destus]

<style>
#div1{
 	border: 1px solid green;
 	width: 100%;
	height: 300px;
	background-color: yellow;
	text-align: center;
	display : flex;
}

#img1{
	height: 100px;
	margin: auto;
}
</style>
<div id="div1">
	<img id="img1" src="http://politrussia.com/upload/iblock/032/032e40743dba6b8e0ec37a7df1f89889.jpg"/>
</div>

[ruslan_mart]

<style>
div#div1{
 	border: 1px solid green;
 	width: 100%;
	height: 300px;
	background-color: yellow;
  position: relative;
}

img#img1{
  bottom: 0;
	height: 100px;
  left: 0;
	margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}
</style>

<div id="div1">
<img id="img1" src="http://politrussia.com/upload/iblock/032/032e40743dba6b8e0ec37a7df1f89889.jpg"/>
</div>

[shurik_shink]

Спасибо, работает оба варианта

Но тут наступил на еще одни грабли: если для родительского контейнера задать дополнительно padding-right: 300px; то изображение сдвигается в право на 300px от центра родительского div.

Подскажите - как от этого избавиться?

<style>
div#div1{
 	border: 1px solid green;
 	width: 100%;
	height: 300px;
	background-color: yellow;
	position: relative;
	
	padding-right: 300px;
}

img#img1{
	bottom: 0;
	height: 100px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
}
</style>

<div id="div1">
<img id="img1" src="http://politrussia.com/upload/iblock/032/032e40743dba6b8e0ec37a7df1f89889.jpg"/>
</div>

И как добавить кнопку посмотреть над кодом - что бы можно было прямо в теме форума посмотреть как работает код.

[ruslan_mart]

box-sizing: border-box для родителя.

И как добавить кнопку посмотреть над кодом - что бы можно было прямо в теме форума посмотреть как работает код.

[JS run]

[shurik_shink]

box-sizing: border-box для родителя

Спасибо, работает. - изображение четко по центру родительского div независимо от размера отступов.

А можно изображение подвинуть в лево на эти самые padding: 300px; от центра, что бы изображение было по среди той области родительского div что не является padding и margin.


!К предыдущему вопросу: если не указивать box-sizing: border-box для родителя изображение как ни странно сдвигается в право, несмотря на то что задан padding-right: 300px; хотя по логике вроде должно было бы в обратную сторону - в лево.

И я хочу добиться что если указано для родителя padding-right: 300px; то изображение должно сдвинуться в лево от центра на 300px;

Пример для наглядности

<style>
div#div1{
    box-sizing: border-box;
	
 	border: 1px solid green;
 	width: 100%;
	height: 300px;
	background-color: yellow;
	position: absolute;
	top: 0; left: 0;
	
	padding-right: 300px;
}

img#img1{
	bottom: 0;
	height: 100px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
}

div#div2{
	position: absolute; top: 0; right: 0; width: 300px; height: 300px; background-color: green;
}
</style>

<div id="div1">
<img id="img1" src="http://politrussia.com/upload/iblock/032/032e40743dba6b8e0ec37a7df1f89889.jpg"/>
</div>
<div id="div2"></div>

[ruslan_mart]

Оно?

<style>
div#div1{
    box-sizing: border-box;
	
 	border: 1px solid green;
 	width: 100%;
	height: 300px;
	background-color: yellow;
	position: absolute;
	top: 0; left: 0;
	
	padding-right: 300px;
}

img#img1{
  border-right: 300px solid transparent;
	bottom: 0;
	height: 100px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
}

div#div2{
	position: absolute; top: 0; right: 0; width: 300px; height: 300px; background-color: green;
}
</style>

<div id="div1">
<img id="img1" src="http://politrussia.com/upload/iblock/032/032e40743dba6b8e0ec37a7df1f89889.jpg"/>
</div>
<div id="div2"></div>

[shurik_shink]

border-right: 300px solid transparent;

Да оно. Спасибо