问题描述:
一个元素在容器中垂直居中。
方法(一)容器盒子设置position:relative;
元素设置position:position: absolute;top: 50%;left:50%;transform:translate(-50%,-50%);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
.container{
position: relative;
width: 500px;
height: 500px;
border: 1px solid black;
}
.container #box{
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left:50%;
transform:translate(-50%,-50%);
background:#008000 ;
}
</style>
</head>
<body>
<div class="container">
<div id="box">box</div>
</div>
</body>
</html>
方法(二) 容器使用flex布局也可以
将容器设置为弹性容器:
display: flex;
justify-content: center;
align-items: center;