<div class="box-wrapper">
<div class="box middle">
<p>ダミーテキスト</p>
</div>
<div class="box top">
<p>ダミーテキスト</p>
</div>
<div class="box bottom">
<p>ダミーテキスト</p>
</div>
</div>
.box-wrapper{
display: table;
height: 200px;
}
.box{
width: 300px;
background-color: #66b6d5;
display: table-cell;
border: 1px #fff solid;
}
.box.middle{
vertical-align: middle;
}
.box.top{
vertical-align: top;
}
.box.bottom{
vertical-align: bottom;
}
p{
color: #fff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.