<div class="container align-items"><div class="content">Blah blah blah...</div></div>
<div class="container margin-auto"><div class="content">Blah blah blah...</div></div>
<div class="container margin-auto"><div class="content smaller">Blah blah blah...</div></div>
* {
box-sizing: border-box;
}
.container {
margin: 20px;
padding: 20px;
background: skyblue;
height: calc(100vh - 40px);
width: 25vw;
float: left;
display: flex;
justify-content: center;
}
.align-items {
align-items: center;
}
.margin-auto .content {
margin: auto 0;
}
.content {
height: 160%;
width: 20vw;
background: lightpink;
padding: 10px;
}
.smaller {
height: 40%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.