<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
border: 1px solid green;
}
/*方法一:根据已知高度写死,修改margin(必须知道父元素的高)
.box2{
margin-top:100px;
}*/
/*方法二:弹性伸缩盒(完美)
.box1{
display: flex;
align-items: center;
}*/
/*方法三:绝对居中(内层盒子必须有宽高)
.box1{
position: relative;
left: 0;
top: 0;
}
.box2{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}*/
/*方法四:负的margin(必须知道box2的高度)
.box1{
position: relative;
left: 0;
top: 0;
}
.box2{
position: absolute;
top: 50%;
margin-top: -50px;
}*/
/*方法五:transform*/
/*.box2{
margin-top: 50%;
transform: translateY(-50%);
因为transform 参照的是自身
}*/
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
垂直居中的几种方式
最新推荐文章于 2020-11-21 07:19:40 发布