<main>
<div>
I'm a block-level element with a fixed height, centered vertically within my parent.
</div>
</main>
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
height: 300px;
margin: 20px;
width: 300px;
position: relative;
resize: vertical;
overflow: auto;
}
main div {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
height: 100px;
margin-top: -70px;
background: black;
color: white;
padding: 20px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.