Vertical align div inside another div without flex

Here you go.

Code Snippet:

.hello {
  height: 100px;
  width: 100px;
  background-color: black;
  vertical-align: middle;
  display: inline-block;
  color: white;
}

.parent {
  height: 400px;
  width: 400px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div class="parent ">
  <div class="hello">
    hello
  </div>
</div>

vertical-align works only for display: table-cell, in some browsers you should wrap parent with display: table

.hello {
  height: 100px;
  width: 100px;
}

.parent {
  height: 400px;
  width: 400px;
  display: table-cell;
  vertical-align: middle;
}

<div class ="parent ">
  <div class="hello">
    hello
  </div>
</div>

Tags:

Html

Css

Related