关于另一种垂直定位方法
来源：2-9 位移变形
江舟
2021-05-22 22:59:40
老师，我在看别人的代码时，发现垂直定位的另一种实现方式：
selector{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
我发现这种实现方式可以不需要固定宽高，从而有较好的拓展性。相比之前的实现方式，如下：
selector {
position:absolute;
top:50%;
left:50%;
margin-top:-自身高度一半;
margin-left:-自身宽度一半;
}
老师能够详细讲述下这两种实现方式的优缺点，以及在什么场合应用特定的实现，最后能否提供下垂直水平居中的其他实现方式以及相应的使用场景？
写回答
1回答
-
好帮手慕言
2021-05-23
同学你好，这两种方式都是可以实现水平垂直居中的效果。
1、如果元素设置了固定的宽高度，那么这两种方式都是可以的，如果元素没有设置固定的宽高度，可以使用第一种方式。
2、元素设置了固定的宽高，定位之后四个方向的偏移值都设置为0，配合margin:auto也可以实现效果，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box-container {
position: relative;
height: 500px;
background-color: #ccc;
}
.box {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #f00;
}
</style>
</head>
<body>
<div class="box-container">
<div class="box"></div>
</div>
</body>
</html>可以根据元素有没有设置固定的宽高度，选择使用哪种方式。
祝学习愉快~
0
