Question

目标是让包含两个图像的div（在这种情况下为willscape-holder）始终浮动在视口的中间。有没有办法做到这一点，而无需进行媒体查询调整每种类型的屏幕上下边距？提前谢谢你的帮助。

＆＃13;

body {
  background: url(../images/willscape-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* background-position: center top; */
  background-attachment: fixed;
}

.container {
  height: 100vh;
}

.willscape-holder {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  padding: 0 20px;
}

#willscape-logo {
  padding: 0 60px;
  width: 100%;
}

#willscape-title {
  width: 100%;
  max-width: 500px;
}

＆＃13;

<body>
  <div class="container">
    <div class="willscape-holder">
      <a href="" target="_blank"><img class="img-responsive" id="willscape-logo" src="assets/images/willscape-logo.png" /></a>
      <a href="" target="_blank"><img class="img-responsive" id="willscape-title" src="assets/images/willscape.png" /></a>
    </div>
  </div>
</body>

＆＃13;

Answer 1

您可以使用视口的高度和css calc函数来计算图像的上边距：

.willscape-holder {
    width: 100%;
    max-width: 350px;
    margin: 0 auto; 
    padding: 0 20px;
    margin-top: calc((100vh - 500px) / 2);
}

其中500是2个盒子的像素高度。

供参考： https://plnkr.co/edit/c1QenriaFK8KatS02MrE?p=preview

Answer 2

你可以使用display：table / table-cell;特性

https://www.w3.org/TR/CSS2/tables.html

17.2 CSS表模型

CSS表模型基于HTML4表模型，其中表的结构与表的可视布局紧密相似。在此模型中，表由可选标题和任意数量的单元格行组成。表模型据说是＆＃34;行主要＆＃34;因为作者在文档语言中明确指定了行而不是列。一旦指定了所有行，就会派生列 - 每行的第一个单元格属于第一列，第二列属于第二列，等等。行和列可以在结构上分组，并且该分组在呈现中反映（例如，可以围绕一组行绘制边界）。

因此，表模型由表，标题，行，行组（包括标题组和页脚组），列，列组和单元格组成。

＆＃13;

/* update*/
html {
height:100%;/* equals min-height */
width:100%;
table-layout:fixed ; /*if fixed, then  width is width not min-width */
display:table;
}
body {
display:table-cell;
vertical-align:middle;
/* end update */
  background: url(../images/willscape-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* background-position: center top; */
  background-attachment: fixed;
}

.container {
 /* height: 100vh;*/
}

.willscape-holder {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  padding: 0 20px;
}

#willscape-logo {
  padding: 0 60px;
  width: 100%;
}

#willscape-title {
  width: 100%;
  max-width: 500px;
}

＆＃13;

<body>
  <div class="container">
    <div class="willscape-holder">
      <a href="" target="_blank"><img class="img-responsive" id="willscape-logo" src="assets/images/willscape-logo.png" /></a>
      <a href="" target="_blank"><img class="img-responsive" id="willscape-title" src="assets/images/willscape.png" /></a>
    </div>
  </div>
</body>

＆＃13;

Answer 3

untitled-ontology-3:MMM

除了元素或ViewPort的大小外，不需要任何其他内容，无论如何都将居中。为了更好地理解Centering with CSS

如何使用CSS总是使视频的div浮动中心

3 个答案: