如何在中心制作固定位置的div [重复]答案

【问题标题】：How to make a fixed position div in center [duplicate]如何在中心制作固定位置的div [重复]
【发布时间】：2021-04-25 00:54:04
【问题描述】：

我有两个宽度为 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;

【问题讨论】：

可能重复：stackoverflow.com/q/6794000/2444959
如果.second 也是fixed，您可以相对于它定位.floating。这对你有用吗？
no .second 不是固定的，只有 .floating 里面是 fixed

标签： css css-position

【解决方案1】：

将transform: translate(-50%) 与left: 50% 一起使用：

.centered {
  background: forestgreen;
  width: 400px;
  height: 100px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

&lt;div class="centered"&gt;&lt;/div&gt;

【讨论】：

这将使.floating div 位于页面中心而不是.second div 的中心
我不确定这是否可行。 fixed 定位位于 viewport 的顶部，除非存在具有 fixed 位置的祖先。您可能需要使用 javascript 来确定您想要的位置并相应地设置 right 和 top 属性：developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/…

【解决方案2】：

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

.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%)
}

【讨论】：

这将使.floating 具有绝对不固定
固定在与父母相关的中心
也许我的问题没有像我想的那样说出来。所以基本上我希望.floating div 位于.second div 的中心，位置固定
使用基于主体而不是父元素的位置元素固定位置，因此唯一的方法是使用绝对位置，因为该元素位于 .second 元素内
是的，你是对的，但我想让里面的 div 固定位置。使用绝对会使其位置静态，这是我不想要的

【解决方案3】：

你可以使用位置：

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

您可以在JSFIDDLE显示完整代码

【讨论】：

这是页面中心。我想让它与.second div 居中对齐，position: fixed
试一试-左：75%；和变换： translateX(-50%);为水平中心。它肯定会起作用。