三种垂直居中办法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box5{ width: 100%; height:900px; /*1*/ /* display: flex; justify-content: center; align-items: center; */ /*2*/ /* display: table; text-align: center; */ /*3*/ /* position: relative; */ } .box6 { /*1*/ /*2*/ /* display: table-cell; vertical-align: middle; */ /*3*/ /* position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); */ } </style> </head> <body> <div class="box5"> <div class="box6">111</div> </div> </body> </html>