Полноэкранное фоновое изображение с центрированным текстом и прокруткой

Question

Я делаю веб-сайт с одной страницей с полноэкранным фоновым изображением, которое также прокручивается.

Here's an example page.

Here's a git repo with all the code.

На рабочем столе этот код всегда будет работать отлично.

HTML:

<section class="test"> 
    <header> 
    Horizontally and vertically centered text 
    </header> 
</section> 

CSS

.test { 
    background: url('img.jpg') no-repeat center center; 
    background-size: cover; 
    padding: 20px 0; 
    height: 100vh; 
} 

header { 
    position: relative; 
    top: 38%; 
    transform: translateY(-38%); 
} 

38% работы для этого случая особенно, скорее всего потому, что у меня есть Navbar над ним. Я знаю, что 50% будут иметь больше смысла, может быть, кто-то может объяснить это дальше.

В любом случае, несмотря на то, что он отлично смотрится на моем измененном экране, если я на самом деле смотрю на него на мобильном телефоне, он выглядит ужасно. Чтобы исправить эту проблему, я изменил код, чтобы добавить @media screen and (min-width: 600px) {} вокруг заголовка, поэтому на меньших экранах не применяется код. Это текущий код.

Он выглядит хорошо, но он чувствует себя взломанным и неточным, поэтому мне интересно, есть ли гораздо лучший способ сделать это, что мне не хватает. Очевидно, я не могу использовать position: fixed, потому что сайт включает свиток; если на сайте было одно полноэкранное изображение без прокрутки, я мог бы использовать фиксированное позиционирование.

Любая помощь будет оценена! Благодарю.

Answer 1

Я не совсем уверен, правильно ли я вас понял, но если вы пытаетесь архивировать вертикальное выравнивание текста, вы можете использовать макет flexbox, например.

article { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    height: 90vh; //100vh - navbar height 
}