背景画像の高さを画面のサイズにした時のテキストの中央表示

背景画像の高さ＝画面のサイズに合わせて背景画像を設定しています。
背景画像の上にテキストを入れたいのですが、画面の高さが変わっても中央に表示するにはどのようにすれば良いのでしょうか。
現状下記コードです。

php
1<div id="top">
2	<h1>テキスト</h1>
3</div>

css
1top{
2  background-image: url(images/abc.jpg);
3  background-size: cover;
4  background-position: center center; 
5  width: 100%;
6  height: 100vh;
7}

行動規範の内容に同意します

回答1件

ベストアンサー

フレックスボックスを使えば子要素を中央に配置することができます。

css
1#top{
2  display: flex;
3  justify-content: center; /* 左右中央 */
4  align-items: center; /* 上下中央 */
5  background-image: url(images/abc.jpg);
6  background-size: cover;
7  background-position: center center; 
8  width: 100%;
9  height: 100vh;
10}

もし子要素に高さと横幅を指定できれば下のような方法もあります。

css
1#top{
2  position: relative;
3  background-image: url(images/abc.jpg);
4  background-size: cover;
5  background-position: center center; 
6  width: 100%;
7  height: 100vh;
8}
9
10#top h1 {
11  position: absolute;
12  top: 0;
13  bottom: 0;
14  left: 0;
15  right: 0;
16  width: 300px;
17  height: 100px;
18  margin: auto;
19  background-color: #fcc;
20  text-align: center;
21}