Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Horizontally and Vertically Center Text Inside a DIV Block</title> <style> .wrapper{ display: flex; align-items: center; justify-content: center; background: #dbdfe5; height: 200px; margin: 10px; } .text-block { background: #abb1b8; flex: 0 0 auto; width: auto; } </style> </head> <body> <div class="wrapper"> <div class="text-block">Multiple lines of text<br> horizontally and vertically aligned.</div> </div> </body> </html>
