如何以响应的方式(不断地)居中文本?

Question

我对编码很陌生。我正在学习HTML和CSS。我想知道我怎样才能使这个标题和副标题在四种形状因素(我所看重的尺寸)中居中。

我不知道为什么使用空白换行没有帮助:(

.text-block {
position: absolute;
color: white;
top: 10px;
right: 50vh;
left: 50vh;
white-space:nowrap;


}


.thecloud {
background: URL("https://picsum.photos/1920/1080");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100vh;
}

.container{
position: relative;
}

.title{

font-family: 'Poppins';

}

.subtitle{

font-family: 'Poppins';

}

<div class="container">

<picture>
<img
src="https://picsum.photos/1920/1080"
/>
</picture>
</div>

<span style="text-align:center" class="text-block">

<h1 class="title">Hubble Space Telescope</h1>

<h2 class="subtitle">30 Years of Discovery</h2>

</span>

Answer 1

您可以像这样实现文本的居中:(注意:我稍微改变了您的HTML)

.container{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
}
.text-block{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

<div class="container">
<picture>
<img alt="" src="https://picsum.photos/1920/1080"/>
</picture>
<span style="text-align:center" class="text-block">
<h1 class="title">Hubble Space Telescope</h1>
<h2 class="subtitle">30 Years of Discovery</h2>
</span>
</div>