Как отцентрировать блок независимо от высоты html?

Question

[PlasterTom]

Есть небольшой одностраничный сайт, в нем только фон и 1 див по центру. Сайт маленький и не требует прокрутки по вертикали.

Код такой (за вычетов не столько важных для вопроса стилей оформления)

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.main {
    height: 45vh;
    width: 45vh;
}

Код работает, но если скачать что-то с сайта, то появляющаяся внизу полоса с загруженными файлами влияет на див. Меняет его положение, размеры. Как отцентрировать див независимо от нее?

Если не задавать высоту body , див вообще отказывается вставать по центру, не понятно почему.

Answer 1

[Максим]

как всегда :

position:absolute 
top:50% left:50%
 transform:translate(-50%,-50%);

Comments

[Владимир]

А не пора ли флексами начинать пользоваться ?
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Максим]

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

[PlasterTom]

Владимир, да вот и я на флексах писала, почему-то не центрируется.

Answer 2

[Сева]

Фиксировать высоту блока, top: 50% и margin-top: минус половина его высоты

Answer 3

[Андрей Токмаков]

У Вас размер блока указан в vh это и есть ваша зависимость. Меняется размер окна - меняется размер блока соответственно. Хотите что бы не менялся размер, указывайте абсолютные единицы, px например. А положение его не меняется, ну опять же смотря относительно чего.