Question

经过几个小时的尝试，不同的样式我无法达到我想要的效果。

我有类似以下内容：

<section class="section-container>
<div>
full screen content which I want to centered (equal space above and below) 
and left aligned. 
</div>
</section>
<section class="section-container>
<div>
full screen content which I want to centered (equal space above and below) 
and left aligned. 
</div>
</section>

我让每个部分占用100vh，以达到我想要的全屏效果。但是，我现在想要在我无法获得的上方和下方获得相等的间距（通常看来，我试图欺骗CSS来做我想要的事情）。我尝试过的几件事

.section-container{
height:100vh;
margin-top:50%;
}

.section-container{
height:100vh;
margin: 50% 0;
}
.section-container{
height:100vh;
vertical-align: center;
}

我在做什么错/误解了？是否有实现这种垂直居中内容的通用技术。

Answer 1

There are a lot of ways to do what you want。但是，在现代CSS中获取居中内容的最简单方法可能是使用Flexbox。要使所有这些内容居中，请尝试以下代码：

.section-container{
  height:100vh;
  display: flex;
  align-items: center;
}

<section class="section-container">
  <div>
    full screen content which I want to centered (equal space above     and below) and left aligned. 
  </div>
</section>

align-items将在没有其他flex属性的情况下将flexed元素的子元素垂直居中。如果您还想使内容水平居中，请添加属性justify-content: center。

Answer 2

我不清楚您的问题，您想在包装器内垂直放置文本内容吗，我已经摘录了您的内容

.section-container{
height:100vh;
margin-bottom:50%;
background: red;
display: flex;
align-items:center;
color: #fff;
}
.section-container:last-of-type{
  margin-bottom: 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<section class="section-container">
<div>
full screen content which I want to centered (equal space above and below) 
and left aligned. 
</div>
</section>
<section class="section-container">
<div>
full screen content which I want to centered (equal space above and below) 
and left aligned. 
</div>
</section>
</body>
</html>

Answer 3

Here是了解元素居中的好资源。问题最有可能来自使用vh或vw。下面是一个可以与您自己的作品一起工作的示例。看到我用px或％代替了vh或vw。

.section-container{
  width: 500px;
}

div {
   margin: 0 auto; 
}

OR

.section-container{
  width: 100%;
}

div {
  margin-right: 10%; 
  margin-left: 10%; 
}

Answer 4

您可以使用flexbox来实现。

首先，将.section-container元素设置为flex 容器添加display: flex规则。
然后，您将使用justify-content: center分发相同的内容左右间距。
最后，应用align-items: center在顶部和底部。

这是您的尝试的修订版：

.section-container {
  height: 100vh;
  display: flex; /** the element becomes a flex container that'll make the life much more easier **/
  justify-content: center; /** center horizontally (same spacing left and right) **/
  align-items: center; /** center vertically (same spacing top and bottom) **/
  border: 1px solid red; /** just for the example so the result can be seen **/
}

<section class="section-container">
  <div>
    full screen content which I want to centered (equal space above and below) and left aligned.
  </div>
</section>
<section class="section-container">
  <div>
    full screen content which I want to centered (equal space above and below) and left aligned.
  </div>
</section>

详细了解flexbox。

希望我进一步推动了你。

居中整页HTML内容

4 个答案: