如何垂直居中位置固定且宽度为 px 的 div？答案

【问题标题】：How to vertical center a div with position fixed and width in px?如何垂直居中位置固定且宽度为 px 的 div？
【发布时间】：2016-03-28 13:04:26
【问题描述】：

我想将一个位置固定的 div 居中。并且它的宽度被指定为 300px 而不是百分比。

<div class="mainCont">
  <div class="childCont">
</div>

childCont 是具有固定位置和宽度 300px 的 div。我想以它为中心。

【问题讨论】：

如果问题中有问题，则更有可能得到答复，每个人都更容易看到您尝试过的内容并对其进行更改并将其作为答案的一部分发布。不过，您是否尝试过使用margin:auto？
你想要水平居中还是垂直居中？
实际上我正在尝试显示弹出窗口，所以我需要水平和垂直居中
高度也是固定的吗？
没有自动高度...

【解决方案1】：

使用以下css：

.childCont {
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
}

【讨论】：

【解决方案2】：

在您的“childCont”类中使用以下 CSS：

.childCont {
    position: fixed;
    width: 300px;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%, 0);
}

【讨论】：

我认为这里不需要3D。
它将 div 带到完美的中心。
为什么是top:50%？
@WisdmLabs 我理解，我实际上想说使用transform: translate(-50%, -50%) 而不是transform: translate3d(-50%,-50%, 0)，但意识到必须始终首选调用3d 属性。 link
@madalin div 是 pos 固定的，需要移动到中心，这就是为什么 left 和 top 应该是 50%