css - 大众汽车单元未在响应页面上垂直居中

Question

我创建了一个响应式页面，我使用 vw 单位来缩放带有拇指翻转标题覆盖的字体。

http://toddheymandirector.com/reel/indextest.html

第一个缩略图 (nike) 是字体停留。其他的是 .png 用于测试目的。我可以让 .png 滚动到垂直中心但不是字体。看起来很简单

.thumb-title-container
{
height:10vw;
width: 100%;
position: absolute;
top: -25vw;
left: 0px;
} overlays

Answer 1

当我尝试垂直居中某些内容时，我会使用 transform 属性，因为它在响应式页面中更一致且更易于使用。这是它的样子:

HTML

<div id="parent">
  <div id="centered-child">
    <p>Some text</p>
  </div>
</div>

CSS

#parent {
  height:300px;
  width:300px;
  background-color:rgba(110,110,110,0.85)
}
#centered-child {
  text-align:center;
  position:relative;
  margin:0 auto;
  top:50%;
  translateY(-50%);  /* There are also browser-specific calls for the translate property */
  background-color:rgba(225,225,225,0.75);
}

子 div 可以容纳任何你想要的东西，所以如果你愿意的话，你仍然可以使用 png 覆盖。相对定位还使子 div 居中，因为主包装器随着浏览器大小而缩小。使用媒体查询确保在较小的屏幕上一切都保持良好。

这是一个 demo pen 你可以测试一下。