2 个回答
✓ 已被采纳

子元素针对父元素绝对定位top50%, transY往回拉-50%, 颜色父元素用rgba别用opacity

<!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 思否面试闯关挑战赛,欢迎正在阅读的你也加入。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题