html - 无法在内容垂直/水平居中的全高页面上保持响应行为

Question

我正在构建一个全高网站，我需要第一部分具有垂直和水平居中的内容。不幸的是，有一张图像作为交易的一部分，当屏幕尺寸改变时，它无法缩放响应。我该如何处理这个问题，因为变换方法似乎从一开始就解决了居中挑战。在第一部分的顶部，我有一个标题，必须在解决方案中加以考虑。

fiddle :https://jsfiddle.net/yevr2tLm/1/

HTML

<section class="container-fluid">
  <header>This is a header</header>
  <div class="content__1">
    <img class="img-responsive" src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" />
    <p>
      This is some awesome text
    </p>
  </div>
</section>

CSS

body,
html {
  height: 100%;
}

section {
  position: relative;
  min-height: 100%;
  min-height: 100vh;
}

.content__1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

header {
  top: 0;
  position: absolute;
  padding-top: 2em;
}

Answer 1

您可以使用 Flexbox 来做到这一点。如果你在容器元素上使用 flex-direction: column 现在你有两个 flex-items:header 和 content 一个在另一个下面。所以你现在可以做的是在内容上使用 flex: 1 这样它将占用 header 之后剩下的窗口高度，你会得到这样的东西

现在您需要在 content__1 元素中垂直和水平居中内容，如果您在 content__1 上使用 display: flex 也可以做到这一点然后你只需添加 align-items: center 和 justify-content: center。为了保持 img 响应，您可以使用 width: 60% 和 height: auto 之类的东西，但您可以根据图像大小进行调整。

* {
  box-sizing: border-box;
}
body,
html {
  margin: 0;
  padding: 0;
}
.container-fluid.flex,
.content__1 {
  display: flex;
  flex-direction: column;
}
.container-fluid.flex {
  height: 100vh;
}
.content__1 {
  align-items: center;
  justify-content: center;
  flex: 1;
}
header {
  background: black;
  padding: 15px;
  color: white;
  z-index: 1;
}
img {
  width: 60%;
  max-height: 70%;
  height: auto;
}
p {
  margin: 0;
}

<section class="container-fluid flex">
  <header>This is a header</header>
  <div class="content__1">
    <img class="img-responsive" src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" />
    <p>This is some awesome text</p>
  </div>
</section>

您可以使用 CSS 表格 来做到这一点。假设 header 有 height: 50px 现在你可以在内容元素上使用 height: calc(100vh - 50px) 和 display: table 。现在你只需要将内容放在表格的中心，如果你将内容包装在另一个具有 display: table-cell 和 vertical-align: middle 属性的 div 中，你就可以做到这一点

* {
  box-sizing: border-box;
}
body,
html {
  margin: 0;
  padding: 0;
}
.container-fluid.flex {
  height: 100vh;
}
header {
  background: black;
  height: 50px;
  line-height: 50px;
  color: white;
  z-index: 1;
}
.content__1 {
  display: table;
  height: calc(100vh - 50px);
  text-align: center;
  width: 80%;
  margin: 0 auto;
}
.inner {
  display: table-cell;
  vertical-align: middle;
}
img {
  width: 60%;
  max-height: 70%;
  height: auto;
}
p {
  margin: 0;
}

<section class="container-fluid flex">
  <header>This is a header</header>
  <div class="content__1">
    <div class="inner">
      <img class="img-responsive" src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" />
      <p>This is some awesome text</p>
    </div>
  </div>
</section>