垂直居中 children 在 parent 中占据全屏

Vertically center children in parent that takes up the full screen

我试过了vertical-align:中间;和边距:自动 0;但它似乎没有用?我在这里缺少什么吗?我的逻辑是,我把 vertical-align: 放在中间;在 parent 容器中。 "children" class 不应该垂直居中吗?我也试过添加 padding:auto 0;到 "children" class 但这似乎也没有做任何事情...

body {
  margin: 0;
  padding: 0;
}

h1 {
  margin: 0;
  font-size: 50px;
}

.btn {
  border: 4px solid #079992;
  padding: 2px 15px;
  color: #079992;
  font-size: 1.5em;
  font-weight: 800;
  display: inline-block;
}

.btn:hover {
  background-color: #38ada9;
  cursor: pointer;
}

.content {
  display: block;
  background-color: #b2bec3;
  text-align: center;
  height: 100vh;
  font-family: helvetica;
  vertical-align: middle;
}
<div class="bg-img">
  <div class="content">
    <div class="children">
      <h1>Random Quote Generator</h1>
      <p>Press the button below for an inspirational quote!</p>
      <div class="btn">Click Me Bro!</div>
    </div>
  </div>
</div>

尝试在父级 class .content 中使用 display:flex 并在 .children class 中使用 margin:auto 使其水平和垂直居中...

body {
  margin: 0;
  padding: 0;
}

h1 {
  margin: 0;
  font-size: 50px;
}

.btn {
  border: 4px solid #079992;
  padding: 2px 15px;
  color: #079992;
  font-size: 1.5em;
  font-weight: 800;
  display: inline-block;
}

.btn:hover {
  background-color: #38ada9;
  cursor: pointer;
}

.content {
  display: flex;
  background-color: #b2bec3;
  text-align: center;
  height: 100vh;
  font-family: helvetica;
  vertical-align: middle;
}

.content .children {
  margin: auto;
}
<body>
  <div class="bg-img">
    <div class="content">
      <div class="children">
        <h1>Random Quote Generator</h1>
        <p>Press the button below for an inspirational quote!</p>
        <div class="btn">Click Me Bro!</div>
      </div>
    </div>
  </div>
</body>


但是 vertical-align 适用于具有 display:table-cell 的表...而且您还需要在元素本身而不是父元素中应用 vertical-align:middle

body {
  margin: 0;
  padding: 0;
}

h1 {
  margin: 0;
  font-size: 50px;
}

.btn {
  border: 4px solid #079992;
  padding: 2px 15px;
  color: #079992;
  font-size: 1.5em;
  font-weight: 800;
  display: inline-block;
}

.btn:hover {
  background-color: #38ada9;
  cursor: pointer;
}

.content {
  display: table;
  width: 100%;
  background-color: #b2bec3;
  text-align: center;
  height: 100vh;
  font-family: helvetica;
}

.content .children {
  vertical-align: middle;
  display: table-cell;
}
<body>
  <div class="bg-img">
    <div class="content">
      <div class="children">
        <h1>Random Quote Generator</h1>
        <p>Press the button below for an inspirational quote!</p>
        <div class="btn">Click Me Bro!</div>
      </div>
    </div>
  </div>
</body>

 body{
  margin: 0;
  padding: 0;
}
h1{
  margin: 0;
  font-size: 50px;
}
.btn{
  border: 4px solid #079992;
  padding: 2px 15px;
  color: #079992;
  font-size: 1.5em;
  font-weight: 800;
  display: inline-block;
}
.btn:hover{
  background-color: #38ada9;
  cursor: pointer;
}
.content{
  display: flex;
  background-color: #b2bec3;
  text-align: center;
  height: 100vh;
  width:100%;
  font-family: helvetica;
  justify-content:center;
  align-items:center;
}
 <div class="bg-img">
    <div class="content">
      <div class="children">
        <h1>Random Quote Generator</h1>
        <p>Press the button below for an inspirational quote!</p>
        <div class="btn">Click Me Bro!</div>
      </div>
    </div>
  </div>

使用 flex 方法垂直对齐。

https://jsfiddle.net/raj_mutant/529bcr98/