Question

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

小提琴：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项：标题和内容一个在另一个下面。所以你现在可以做的就是在内容上使用flex: 1，这样它将占用header之后剩下的窗口高度，你会得到类似这样的东西

现在您需要在content__1元素中纵向和横向居中内容，如果您在display: flex上使用content__1，则可以执行此操作，然后只需添加align-items: center和justify-content: center。要保持img响应，您可以使用width: 60%和height: auto之类的内容，但您可以根据图片大小进行调整。

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

您可以使用 CSS表格执行此操作。可以说header已height: 50px，现在您可以在height: calc(100vh - 50px)的内容元素上使用display: table。现在你只需要将内容集中在表中，如果你将内容包装在另一个具有display: table-cell和vertical-align: middle属性的div中，你可以这样做

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 2

如果我正确理解您的问题，您可以执行以下操作：

<style>
    body,
    html {
        background-image: url('http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 80%;
        background-position: center;
        height: 100%;
    }

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

    .content__1 {

    }

    header {
        top: 0;
        position: absolute;
        padding-top: 2em;
    }
</style>

然后身体变成：

<body>
    <section class="container-fluid">
        <header>This is a header</header>
        <div class="content__1">
            <p>
                This is some awesome text
            </p>
        </div>
    </section>
</body>

Answer 3

如果您不喜欢调整大小时图片的小尺寸，请选择最小宽度：300px或想要成像的像素。

无法在包含vert / horz居中内容的整个高度页面上维护响应行为

3 个答案: