使用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%);
width:40%;
padding: 1em;
background-color: grey;
}*/
/*main {*/
/*margin: 50vh auto 0;*/
/*padding: 1em 1.5em;*/
/*width: 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>
时间： 2024-10-13 22:36:13