使用flex解决垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding:0; margin: 0; box-sizing: border-box; } /*使用absolute和translate，垂直居中*/ /*body {*/ /*padding:1em calc(50% - 450px);*/ /*background-color: mistyrose;*/ /*}*/ /*main { position: absolute; top:50%; left: 50%; !*根据自身的width，height进行百分比偏移*! transform: translate(-50% , -50%); 40%; padding: 1em; background-color: grey; }*/ /*main {*/ /*margin: 50vh auto 0;*/ /*padding: 1em 1.5em;*/ /* 28em;*/ /*background-color: grey;*/ /*transform: translateY(-50%);*/ /*}*/ /*更好的方法，使用flex*/ body { display: flex; height: 100vh; background-color: antiquewhite; } main { margin: auto; display: flex; align-items: center; justify-content: center; flex-flow: column; width: 28em; height: 10em; background-color: gray; } </style> </head> <body> <main> <h1>Am I centered yet?</h1> <p>Center me, please!</p> </main> </body> </html>