Question

我尝试过vertical-align：middle;和保证金：自动0;但它似乎没有起作用？我有什么东西在这里失踪吗？我的逻辑是，我把vertical-align：middle;在父容器中。不应该以“孩子们”为中心。班级垂直进入中心？我也试过添加，填充：auto 0;对孩子们来说＆＃34;上课，但似乎没有做任何事......

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

尝试使用display:flex中的.content和margin:auto类中的.children来水平和垂直居中...

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>

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

使用flex方法垂直对齐。

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

父母中的儿童垂直居中，占据全屏

2 个答案: