无法在中心对齐固定 div答案

【问题标题】：Can't align a fixed div in the center无法在中心对齐固定 div
【发布时间】：2017-01-19 11:06:20
【问题描述】：

我目前有一个我想要定位的 div：fixed;

它工作正常，但div的定位不再。

我试过 Margin: auto & Text-Align: center 但还是没有。我尝试在我的主要部分周围设置一个 div，并修复外部部分，但仍然没有。

没有位置：固定它会以我想要的方式居中。带位置：固定；它只会向左走。

有人知道解决办法吗？

【问题讨论】：

请添加所有相关代码。
请访问帮助中心，了解如何提出一个好的问题。寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。

标签： css position fixed

【解决方案1】：

您需要将left: 0 和right: 0; 添加到中心fixed 定位元素。

.dd {
    position: fixed;
    width: 50%;
    height: 100px;
    background: lightgreen;
    left: 0;
    right: 0;
    margin: 0 auto;
}

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

【讨论】：

非常感谢！您能否详细说明为什么我需要添加 left: o;和权利：o;？我对 HTML/CSS 不熟悉。
margin: 0 auto; 将元素对齐到中心。固定元素需要定义左右边缘以在它们之间居中。默认情况下，左为 0，右为自动。当我们将右边设置为 0 时，我们将区域拉伸到窗口宽度以使元素居中，因为默认情况下该区域宽度等于元素本身的宽度

【解决方案2】：

如果要对齐位置：固定元素，则需要在顶部、左侧、右侧和底部添加坐标值。或者至少两个。

position: fixed;
top: 50%;
left: 50%;

然后您必须将元素转换为精确居中，因为 0/0 坐标位于元素的左上角。

你可以使用

transform: translate(-50%, -50%);

【讨论】：

【解决方案3】：

使用top、left 和transform

.fixed{
  position:fixed;
  width:200px;
  height:200px;
  background-color:green;
  left:0;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

<div class="fixed">
</div>

【讨论】：