Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Flexbox: Center Horizontally and Vertically</title> <style> .flex-container { margin: 30px; min-height: 300px; display: flex; border: 1px solid black; justify-content: center; /* align item horizontally */ align-items: center; /* align item vertically */ } .item { width: 100px; padding: 20px; background: #b4bac0; } </style> </head> <body> <div class="flex-container"> <div class="item">Centered Item</div> </div> </body> </html>
