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 。

大众单位不垂直居中于响应页面

1 个答案: