2021.11.19 补充:由left:50%引发的问题及解决方法4

设置全偏移法

包含块还有一个的特性,

就是同时设置了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>

效果显示:

在这里插入图片描述