CSS: Vertical-align

Question

How to vertical-align without using display table/table-cell or position absolute ?

#parent {
  border: 1px solid red;
  height: 100vh;
}

.child {
  border: 1px solid blue;
}

<div id="parent">
  <div class="child">
    <p>I want to be vertical aligned</p>
  </div>
</div>

Answer 1

Here is an another option using "Flex" property.

<div id="parent">
  <div class="child">
    <p>I want to be vertical aligned</p>
  </div>
</div>

#parent {
  border: 1px solid red;
  display: flex;
  align-items: center;
  height: 100vh;
}

.child {
  border: 1px solid blue;
  flex-grow: 1;
}

Codepen demo link

Answer 2

You can use position relative, with top of 50% and a translation of -50%.

#parent {
  border: 1px solid red;
  height: 100vh;
}

.child {
  position: relative;
  top: 50%;
  transform: translate(0,-50%);
  border: 1px solid blue;
}

<div id="parent">
  <div class="child">
    <p>I want to be vertical aligned</p>
  </div>
</div>