Как передвинуть div блок в центр страницы?

Question

[Demigodd]

https://jsfiddle.net/Ljqf8nrh/
Как поставить DIV (login-container) в самый центр ?
margin: 50% auto;
не помогает.

И еще когда в Header и Footere написал Position:fixed. Теперь они поверх любого элемента, как сделать что бы другие элементы их считали блоками и просто прикасались их а не растворились внутри.
Screen_1

Answer 1

[Александр]

Сделайте ему обертку с display: flex, justify content: center.
На счет второго вопроса, после присвоения position: fixed блоки выпадают из потока и соседние блоки их не воспринимают. Можно задать соседним блокам отступы, которые компенсировали бы размеры ваших футера и хедера.

Comments

[Demigodd]

А можно подробнее с этим display:flex ?
У меня в главном div`e

.login-container {
    display: inline-block;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

уже есть display: inline-block;
и если его не написать то div будет во всю ширину (Width 100%)
Как в этом случае правильно написать
display: flex;
justify-content: center;

[Александр]

DEATH2298, Подробнее про флексы
Ну можно сделать еще один див-обёртку с display: flex.Или задать .login-container -> display: flex, а форме задать нужные вам размеры

Answer 2

[Алексей Стрекалов]

https://jsfiddle.net/ryter/Ljqf8nrh/10/

Comments

[Demigodd]

Спасибо вариант, но там с левой соторны, у Input`a пропадает Border.

[Алексей Стрекалов]

пропишите ему border: 1px solid red;

Answer 3

[Петр]

Так?

Comments

[Demigodd]

Да но, из за height:100vh;
У страницы появилась прокрутка.

[Петр]

DEATH2298, Еще так попробовать можно.