如何以响应方式（持续）将文本居中？

Question

我对编码还很陌生。我正在学习 HTML 和 CSS。我想知道如何使这个标题和副标题以四种外形尺寸（我预先确定的尺寸）为中心。

我不确定为什么使用 white-spaceno wrap 没有帮助:(

 .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>

如何以响应方式（持续）将文本居中？

How can I center text (constantly) in a responsive manner?

html

css

text

responsive

centering