方法1(不常用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子垂直左右居中</title>
<style>
.box{
width:1000px;
height:500px;
border:1px solid #000;
margin:0 auto;
display:flex;
}
.box>div{
width:200px;
height:200px;
background-color:yellow;
margin:auto;
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
</body>
</html>
translate(x,y)利用位移垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子垂直左右居中</title>
<style>
.box{
position:absolute;
left:50%;
top:50%;
width:200px;
height:200px;
background:red;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
最简单的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子垂直左右居中</title>
<style>
.box{
width:500px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-200px;
background:pink;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
