如何以响应的方式（不断地）居中文本？答案

【问题标题】：How can I center text (constantly) in a responsive manner?如何以响应的方式（不断地）居中文本？
【发布时间】：2021-11-11 21:49:40
【问题描述】：

我对编码很陌生。我正在学习 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>

【问题讨论】：

标签： html css text responsive centering

【解决方案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>

【讨论】：