居中对齐固定位置的div元素

Question

我想让一个具有position:fixed的div在页面中居中对齐。

以前我总是用这个“hack”来让绝对定位的div居中对齐。

left: 50%; 
width: 400px; 
margin-left: -200px;

...其中margin-left的值为div宽度的一半。

但是对于固定位置的div，这似乎无效，它只会将它们放置在左上角并忽略margin-left声明。

有什么方法可以修复这个问题，以便我可以居中对齐固定定位元素？

如果您能告诉我比我上面概述的更好的绝对定位元素居中对齐的方法，我将额外奖励你一个M&M。

- Kyle

---

只要不是IE6（显然），这对我来说是有效的。 - bobince

@Kyle，如果您能选择一个答案，那将有助于其他用户识别解决方案。 - andreihondrari

Answer 1

Koen的答案并没有完全居中元素。

正确的方法是使用CSS3的transform属性，尽管它在一些旧浏览器中不被支持。我们甚至不需要设置固定或相对的width。

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

.almost-centered {
    background-color: #eee;
    position: fixed;
    width: 40%;
    text-align: center;
    top: 5%;
    left: 50%;
    padding: 20px;
    margin-left: -20%;
}

.centered {
    background-color: #eee;
    position: fixed;
    width: 40%;
    text-align: center;
    top: 25%;
    left: 50%;
    padding: 20px;
    transform: translate(-50%, 0);
}

<div class="almost-centered">
    I'm almost centered DIV lorem ipmsum
</div>

<div class="centered">
    I'm exactly centered DIV using CSS3
</div>

- empz

---

太好了。我将其用于 Cordova 应用程序，预计可以在主要更新的浏览器中运行 :) - saurabh

非常简单但非常有用。谢谢。 - Gilberto Sánchez

真正的答案 +1 - sn3ll

这应该是答案，至少在我不知道宽度的情况下。 - David Geere

@Alex left: 50% 把 div 移动到页面的 50%，但是要记住它是从 div 左边开始移动，因此 div 还没有居中。translate(-50%, 0) 基本上等同于 translateX(-50%)，它考虑了 div 的当前宽度并将其向左移动 -50% 的宽度，从实际位置移到左侧。 - emil.c

Answer 2

对于遇到相同问题但使用响应式设计的人，你也可以使用：

width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;

通过这样做，即使使用响应式设计，您的固定 div 也始终保持在屏幕中央。

- Koen

---

这对我的响应式网页设计项目有所帮助 :) - tctc91

这37.5%是从哪里来的？ - aurora

@aurora - 这是位置设定的负一半（在这种情况下为 -(75/2)）。 - Inaimathi

为什么这不是被接受的答案还是个谜，它只是有效地工作（tm）。 - CGK

Cropis有更好的解决方案。 - Arnaldo Capo

Answer 3

你也可以使用flexbox来实现这个效果。

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  /* this is what centers your element in the fixed wrapper*/
  display: flex;
  flex-flow: column nowrap;
  justify-content: center; /* aligns on vertical for column */
  align-items: center; /* aligns on horizontal for column */
  
  /* just for styling to see the limits */
  border: 2px dashed red;
  box-sizing: border-box;
}

.element {
  width: 200px;
  height: 80px;

  /* Just for styling */
  background-color: lightyellow;
  border: 2px dashed purple;
}

<div class="wrapper"> <!-- Fixed element that spans the viewport -->
  <div class="element">Your element</div> <!-- your actual centered element -->
</div>

- andreihondrari

---

为什么要提到居中和align="center"？text-align:center就可以了。 翻译后的语句保留了原意，并简化了表述，同时遵守了不添加解释或其他非翻译内容的要求。 - wlf

你应该将文本对齐样式包含在你的示例中。 - Manatax

非常感谢！这真的帮了我很多！ - Joan.bdm

我修改了我的答案，删除了已经过时的<center>标签，并使用了现代技术，如display: flex和一些相关属性。 - andreihondrari

Answer 4

根据上面的帖子，我认为最好的方法是：

1. 创建一个固定宽度为 width: 100% 的 div
2. 在该 div 内部创建一个新的静态 div，使用 margin-left: auto 和 margin-right: auto 居中，或者对于表格，使用 align="center"
3. 完成了，现在你已经让你的固定 div 居中了

希望这可以帮到你。

- Bhimbim

---

如果您需要将一个固定宽度的div居中，这个方法非常有用。例如，990像素。 - dcernahoschi

这也是我知道的允许固定定位元素使用“max-width”的唯一方法。你想要一个固定的侧边栏，在响应式地占据你网页 max-width: 1200px 的30％吗？这个方法可以实现。 - Michael

Answer 5

水平居中：

display: fixed;
top: 0; 
left: 0;
transform: translate(calc(50vw - 50%));

水平垂直居中（如果高度和宽度相同）：

display: fixed;
top: 0; 
left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));

无副作用：在使用flexbox中的margin时，它不会限制元素的宽度。

- proseosoc

---

这比使用left: 50％;transform：translate（-50％，0）;更好，因为它可以避免在Firefox上当居中小部件的50％> 50vw时出现水平滚动条的情况。 - m7913d

Answer 6

<div class="container-div">
  <div class="center-div">

  </div>
</div>

.container-div {position:fixed; left: 0; bottom: 0; width: 100%; margin: 0;}
.center-div {width: 200px; margin: 0 auto;}

这个也应该能做到相同的效果。

- JCBrown

Answer 7

普通的div应该使用margin-left: auto和margin-right: auto，但这对于固定的div不起作用。解决方法与Andrew's answer类似，但不使用已弃用的<center>标签。基本上，只需给固定的div加一个包装器。

#wrapper {
    width: 100%;
    position: fixed;
    background: gray;
}
#fixed_div {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100px;
    height: 30px;
    text-align: center;
    background: lightgreen;
}

<div id="wrapper">
    <div id="fixed_div"></div>
</div

这将使固定的div在保持与浏览器交互的同时居中于另一个div中。例如，如果有足够的空间，div将会居中，但如果没有足够的空间，它将会与浏览器边缘发生碰撞，类似于普通居中的div的反应。

- Kevin

Answer 8

如果您想要垂直和水平居中一个固定位置的div，请使用以下代码：

如果您想要垂直和水平居中一个固定位置的div，请使用以下代码：

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

- LAXIT KUMAR

Answer 9

如果您知道宽度为400像素，我想这将是最简单的方法。

 left: calc(50% - 200px);

- Daut

Answer 10

传统的方法是使用.center { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }，试图在居中元素周围保留一些空白区域，这经常导致居中元素的宽度不理想，例如比应有的宽度小。
@proseosoc的答案在这种情况下能很好地工作，并将居中元素的范围扩展到视口边缘。然而，被居中的元素会在包括滚动条在内的整个视口中心对齐。但是，如果您的用例要求在没有滚动条的空间中居中元素，则可以使用这个修改后的答案。这种方法也类似于前面提到的传统方法，即将元素居中在没有滚动条的空间中。
水平居中

.horizontal-center {
  position: fixed;
  left: calc((50vw - 50%) * -1); /* add negative value equal to half of the scrollbar width if any */
  transform: translate(calc(50vw - 50%));
}

垂直居中

.vertical-center {
  position: fixed;
  top: calc((50vh - 50%) * -1);
  transform: translate(0, calc(50vh - 50%));
}

水平垂直居中

.center {
  position: fixed;
  left: calc((50vw - 50%) * -1);
  top: calc((50vh - 50%) * -1);
  transform: translate(calc(50vw - 50%), calc(50vh - 50%));
}

- arafatgazi