<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.