设置全偏移法
包含块还有一个的特性，
就是同时设置了left和right值，
那么，宽度就变成了包含块的100%宽度，
而不是包含块的50%宽度。
这时， 再给子盒子一个最大宽度。
所以把这个方法叫做设置全偏移法，
意思就是把left right top都设置上。
这样确保子盒子的位置和宽度。
案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 300px;
height: 500px;
margin: auto;
margin-top: 20px;
background-color: pink;
}
.box1 {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
max-width: 200px;
margin: auto;
text-align: center;
background-color: rgba(95, 158, 160, .4);
pointer-events: none;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</div>
</body>
</html>
效果显示：