Почему мой дивизион не сосредоточен на моем изображении? ⇐ CSS

[Anonymous]

Я довольно новичок в HTML/CSS. У меня проблемы, сосредоточенные на некотором контенте по фоновому изображению. Это мой первый раз, когда я использую изображение в качестве фактического фона. Я использую только фоновое изображение для некоторого контента, так как буду скрывать его с JS позже. У меня проблемы, пытающиеся позиционировать главную меню в центре фонового изображения. Он позиционируется слишком высоко, но когда я использую инструмент осмотра, он позиционируется еще выше.
я пытался изменить топ , снизу и transform , и последнее изменение-это то, что вы видите в моем коде. class = "Snippet-Code-CSS Lang-CSS PrettyPrint-override">

Код: Выделить всё

.main-menu {
background-image: url('retro-sunburst.jpg');
position: relative;
width: 100%;
height: 100vh;
z-index: 0;
}

.menu-container {
background-color: #39241e;
border-radius: 10px;
position: absolute;
text-align: center;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}< /code>


[img]images/retro-sunburst.jpg[/img]


Match Before You're Snatched
Instructions
New Game


How to Play
Instructions go here
New Game





Match Before You're Snatched 

Подробнее здесь: https://stackoverflow.com/questions/796 ... r-my-image