设置全偏移法
包含块还有一个的特性,
就是同时设置了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>
效果显示:
