<div class="div1">
  This is the test1
</div>
<div class="div2">
  <div class="div2Content">
    <h3>This is the test2</h3>
    <a href="#">Link</a>
  </div>
</div>
<div class="div3">
  <div class="div3Content">
    <h3>This is the test3</h3>
    <a href="#">Link</a>
    <h4>This is the test3</h4>
  </div>
</div>
<div class="div4">
  <div class="div4Content">
    <h3>This is the test4</h3>
    <a href="#">Link</a>
    <h4>This is the test4</h4>
  </div>
</div>
<div class="div5">
  <div class="div5Content">
    <h3>This is the test5</h3>
    <a href="#">Link</a>
    <h4>This is the test5</h4>
  </div>
</div>
<div class="div6">
  <div class="div6Content">
    <h3>This is the test6</h3>
    <a href="#">Link</a>
    <h4>This is the test6</h4>
  </div>
</div>
<div class="div7">
  <div class="div7Content">
    <h3>This is the test7</h3>
    <a href="#">Link</a>
    <h4>This is the test7</h4>
  </div>
</div>
<div class="div8">
  <div class="div8Content">
    <h3>This is the test8</h3>
    <a href="#">Link</a>
    <h4>This is the test8</h4>
  </div>
</div>
<div class="div9">
  <div class="div9Content">
    <h3>This is the test9</h3>
    <a href="#">Link</a>
    <h4>This is the test9</h4>
  </div>
</div>
.div1{
  width:200px;
  background-color:#00BBFF;
  line-height:100px;
}
.div2{
  width:200px;
  background-color:#00FFCC;
  line-height:100px;
}
.div2Content{
  display:inline-block;
  vertical-align:middle;
  line-height:1px;
}
.div3{
  width:200px;
  height:200px;
  background-color:#9F88FF;
}
.div3::before{
  content:'';
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
.div3Content{
  display:inline-block;
  vertical-align:middle;
  background-color:#ffffff
}
.div4{
  width:200px;
  height:200px;
  background-color:#BBFF66;
  position:relative
}
.div4Content{
  position:absolute;
  background-color:#ffffff;
  height:120px;
  top:50%;
  margin-top:-60px;
}
.div5{
  width:200px;
  height:200px;
  background-color:#FFDD55;
  position:relative
}
.div5Content{
  position:absolute;
  background-color:#ffffff;
  top:50%;
  transform:translate(0,-50%)
}
.div6{
  width:200px;
  height:200px;
  background-color:#FFA488;
  display:flex;
  align-items: center;
}
.div6Content{
  background-color:#ffffff;
}
.div7{
  width:200px;
  height:200px;
  background-color:#FF88C2;
  display:flex;
}
.div7Content{
  background-color:#ffffff;
  margin:auto 0;
}
.div8{
  width:200px;
  height:200px;
  background-color:#DDDDDD;
  display:flex;
}
.div8Content{
  background-color:#ffffff;
  align-self: center;
}
.div9{
  width:200px;
  height:200px;
  background-color:#EEFFBB;
  display:table-cell;
  vertical-align:middle
}
.div9Content{
  background-color:#ffffff;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.