.parent { display: flex; justify-content: center; align-items: center; }
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style type="text/css"> div { display: table-cell; width: 250px; height: 200px; vertical-align: middle; } </style> </head> <body> <div>Vertically aligned text</div> </body> </html>
.parent-class { display: flex; align-items: center; justify-content: space-around; }
.center { display: flex; justify-content: center; align-items: center; height: 200px; border: 3px solid green; }
div { display: block; margin-left: auto; margin-right: auto; width: 40%; }