Vertically center children in parent that takes up the full screen

Question

I've tried vertical-align: middle; and margin: auto 0; but it doesn't seem to be working? Is there something I'm missing here? My logic is, I put the vertical-align: middle; in the parent container. Shouldn't that center the "children" class into the center vertically? I've also tried adding, padding:auto 0; to the "children" class but that didn't seem to do anything either...

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>

when writing your question pay attention to the related question you get ... there is at least 10 of them dealing with vertical alignment — Temani Afif, Mar 30 '18 at 08:33

Bhuwan · Accepted Answer · 2018-03-30T07:22:40.747

Try to use display:flex here in the parent class .content and margin:auto in .children class to center it horizontally and vertically...

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>

However vertical-align works on tables with display:table-cell...and also you will need to apply vertical-align:middle in the elements itself not in the parent

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>

score 0 · Answer 2 · answered Mar 30 '18 at 07:10

 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>

use flex method to vertical align.

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

Vertically center children in parent that takes up the full screen

2 Answers2