Question

将div居中时，我在台式机上成功了，我尝试使用chrome内置的“检查”分辨率更改，但在“移动”上，div停留在另一个div的底部。谁能帮忙，看看div为什么在“桌面模式”中居中，而不在“移动模式”中居中吗？谢谢

.headercontainer {
  overflow-y: hidden;
}

.header-title {
  width: 80%;
  height: 100px;
  left: 50%;
  top: 50%;
  font-size: 2em;
  z-index: -1;
  position: fixed;
  margin-left: -40%;
  margin-top: -50px;
  height: 100px;
  transform: translateY(-50%);
}

.header-title h1 {
  color: white;
  text-shadow: 2px 2px 4px #d1d1d1;
  font-family: 'Raleway', sans-serif;
  white-space: nowrap;
  text-transform: uppercase;
  text-align: center;
}

.header-image {
    background-image: url("images/Westminster.jpg");
    background-position: center center;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 5em;
    height:60vh;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position:relative;
    z-index: -3;
}

<div class = "headercontainer">
  <div class = "header-image">
    <div class = "header-title">
      <h1> Anarchists and Autocrats </h1>
    </div>
  </div>
</div>

Answer 1

您应该使用position:absolute而不是position:fixed。通过我的JSFiddle链接或尝试以下书面代码：

HTML代码-

<div class="headercontainer">
    <div class="header-image">
        <div class="header-title">
            <h1> Anarchists and Autocrats </h1>
        </div>
    </div>
</div>

CSS代码-

.headercontainer {
    overflow-y: hidden;
    position: relative;
}

.header-title {
    width: 80%;
    height: 100px;
    top: 50%;
    font-size: 2em;
    z-index: -1;
    position: absolute;
    height: 100px;
    transform: translateY(-50%);
}

.header-title h1 {
    color: #404040;
    text-shadow: 2px 2px 4px #d1d1d1;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    text-align: center;
}

.header-image {
    background: url("https://www.nyhabitat.com/blog/wp-content/uploads/2013/10/westminster-london-houses-parliament-big-ben-thames-river.jpg") center/ cover;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 5em;
    height: 60vh;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
    z-index: -3;
}

Div集中在台式机而不是移动设备上

1 个答案: