在移动设备上的容器中居中标题文本答案

【问题标题】：Center header text in a container on mobile在移动设备上的容器中居中标题文本
【发布时间】：2018-09-27 00:33:36
【问题描述】：

此页眉中的文本居中正常，直到您缩小页面宽度，然后它只是将文本向右移动。

你可以在这里测试它： http://jsfiddle.net/ors2gqey/

.header {
  background-color: #000;
  width: 100%;
  display: block;
  overflow: hidden;
}

.headerImg {
  padding: 200px;
  background-image: url("header.jpg");
  background-position: 50% 100%;
  background-size: cover;
  background-attachment: fixed;
  text-align: center;
}

.header h1 {
  min-width: 140px;
  text-align: center;
  color: white;
  font-size: 4.5em;
}

<header class="header">
  <div class="headerImg">
    <h1>TEST TEXT</h1>
  </div>
</header>

【问题讨论】：

在小屏幕上，200px 的内边距不再适合。使用媒体查询更改小屏幕的填充量。
我想保持标题大小相当大。我尝试添加最小高度，但文本没有垂直居中。有办法克服吗？
您定义填充的方式，它在顶部、右侧、底部和左侧使用 200px。您可能只将它用于顶部和底部：padding: 200px 0;
哦，非常感谢！这正是我一直在寻找的。我犯了一个愚蠢的错误，但再次感谢您为我解决这个问题。

标签： css mobile header containers centering

【解决方案1】：

@media (max-width: 600px) {
    .headerImg {
        padding: 0;
    } 
}

.header {
  background-color: #000;
  width: 100%;
  display: block;
  overflow: hidden;
}

.headerImg {
  padding: 200px;
  background-image: url("header.jpg");
  background-position: 50% 100%;
  background-size: cover;
  background-attachment: fixed;
  text-align: center;
}

@media (max-width: 600px) {
    .headerImg {
        padding: 0;
     }
}

.header h1 {
  min-width: 140px;
  text-align: center;
  color: white;
  font-size: 4.5em;
}

<header class="header">
  <div class="headerImg">
    <h1>TEST TEXT</h1>
  </div>
</header>

【讨论】：

只用整页链接测试查询

【解决方案2】：

问题是我在所有方面都使用了填充。

仅在顶部和底部使用填充解决：

.headerImg {
    padding-top: 200px;
    padding-bottom: 200px;
    background-image: url("header.jpg");
    background-position: 50% 100%;
    background-size: cover;
    background-attachment: fixed;
    text-align: center;
}

【讨论】：