<main> <div> I'm a block-level element with an unknown height, centered vertically within my parent. </div> </main>
body { background: #3e58aa; 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; background: #CCDCCD; color: #3e58aa; padding: 20px; transform: translateY(-50%); resize: vertical; overflow: auto; }