时间戳

首页 > 解决方案 > 如何在中心制作固定位置的div

css - 如何在中心制作固定位置的div

问题描述

我有两个 50% 宽度的 div，并希望将一个 div（在其中一个内部）设置为固定位置和居中。

我创建了一个codepen。请查看它以更好地了解问题。我也在这里嵌入了我的代码。

<div class="parent">
  <div class="first">
    <p>...</p>
  </div>
  <div class="second">
    <p>...</p>
    <div class="floating"></div>
  </div>
</div>

.parent {
  display: flex;
  width: 100%
}
p {
  color: #fff;
  padding: 20px;
}
.first {
    width: 50%;
    height: 100vh;
    background-color: #000;
}
.second {
    width: 50%;
    height: 100vh;
    background-color: #ddd;
}
.floating {
    width: 100px;
    height: 100px;
    background-color: #fff;
    position: fixed;
}

PS我知道它可能与位置粘性但我不想使用它。您可以在类中添加以下代码，.floating它将位于中心。

    position: sticky;
    margin: 0 auto;

标签： csscss-position

解决方案

设置相对于第二个元素的位置，然后将框设置在中心位置，绝对位置如下：

.second {
    position: relative;
    width: 50%;
    height: 100vh;
    background-color: #ddd;
}
.floating {
    width: 100px;
    height: 100px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

推荐阅读