<!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>
.f {
width: 300px;
height: 500px;
/* 透明 */
background: rgba(0,0,0,0.2);
position: relative;
}
.s {
width: 300px;
height: 50px;
background-color: green;
text-align: center;
line-height: 50px;
/* 盒子居中 */
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="f">
<span>asdf</span>
<div class="s">我是子盒子</div>
</div>
</body>
</html>
本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。
10 回答11.1k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
5 回答1.9k 阅读
子元素针对父元素绝对定位top50%, transY往回拉-50%, 颜色父元素用rgba别用opacity