Как выровнять картинку ровно по центру (вертикально)?

Question

[Молзв Реках]

Есть наглядный пример:
Сайт: google.com (не пиар :D)
Как видим, у него лого расположено по середине, как такое сделать мне? У меня есть код:

<header class="search">
		<div class="container">
			<img src="images/logo.png" alt="Loading image..." class="google-image">
		</div>
	</header>

CSS:

header {
	width: 930px;
	margin: 0 auto;
}

Comments

[Дмитрий]

header .container {}
Так наверное надо

[Молзв Реках]

Дмитрий, ???? Мне надо расположить картинку вертикально по центру, причём тут это

[Иван]

давайте начнём с того, что у гугла картинка далеко не по центру. если мы прожмём f12, то увидим, что у них есть контейнер, в нём есть блок с картинкой. контейнер расположен на всю ширину экрана, а блок с картинкой отцентрован при помощи margin 0 auto, а далее сам контейнер при помощи маргина оттолкнули на определенное кол-во пиксилей.

[Молзв Реках]

BenderIsGreat34, Мне главное увидеть ответ, я сам подберу размер

[Иван]

SaddledSharp, дак ведь я дал вам ответ)
можно сделать на флексбоксах)

.container {
width: 100%;
margin-top: 50px;
}
div {
display: flex;
justify-content: center;
align-items: center;
}

Answer 1

[ReActor Дмитрий Вершанский]

.container {
    margin-top: 45vh;
}

Значение может быть и не 45, а в интервале 45-48, зависит от величины вашего лого, поэтому подбирайте точечно в Вашем случае

Вспомнил про особенность когда дочерний элемент тянет родительский за собой, при условии что мы его "топим" top, поэтому лучше так:

.container {
    padding-top: 45vh;
}

Answer 2

[AlexeewAlex]

header div{
    display: flex;
    justify-content: center;
    align-items: center;
}

Comments

[Молзв Реках]

А как именно вертикально по середине? То есть как лого гугла на сайте google.com

[ReActor Дмитрий Вершанский]

SaddledSharp, А что logo google на сайте действительно по середине???

[ReActor Дмитрий Вершанский]

HunteR-VRX, за вертикалку отвечает это свойство align-items: center; при условии работы во flex-контейнере

[Молзв Реках]

HunteR-VRX, Нет, я уже подобрал, сказал же: "Главное увидеть ответ, я сам подберу." Плюс минус так:

.google-image {
	margin-top: 21vh;
	margin-left: 36vh;
}

P.S: знаю, подбирать неправильно, это многие ошибки новичков, но других ответов не было, по этому пришлось подобрать.

[ReActor Дмитрий Вершанский]

SaddledSharp, в случае с margin-left: 36vh, работайте в vw единицах, а не vh, так как в этом случае вам необходимо "завязываться" на ширине области просмотра браузера)