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

Question

此标题中的文本会居中，直到您缩小页面的宽度，然后才将文本向右移动。

您可以在这里进行测试： 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>

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

Answer 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;
}