Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Align a Div Vertically Center</title> <style> html, body{ margin: 0; padding: 0; } .wrapper{ display: flex; height: 100vh; align-items: center; /* vertically center div */ } .box{ width: 50%; /* set width of div */ padding: 20px; margin: 0 auto; /* horizontally center div */ background: #ccc; font-size: 2em; } </style> </head> <body> <div class="wrapper"> <div class="box">Vertically Centered Div</div> </div> </body> </html>
