html - 居中对齐固定位置的 div

Question

我正在尝试获得一个position:fixed在我的页面上居中对齐的 div。

我一直能够使用这个“hack”来使用绝对定位的 div

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

...margin-left 的值是 div 宽度的一半。

这似乎不适用于固定位置的 div，它只是将它们的最左角放置在 50% 处，并忽略 margin-left 声明。

关于如何解决这个问题的任何想法，以便我可以居中对齐固定定位的元素？

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

score 247 · Accepted Answer

Koen 的回答并不完全以元素为中心。

正确的方法是使用CCS3 transform属性。虽然一些旧浏览器不支持它。而且我们甚至不需要设置一个 fixed 或 relative width。

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

在这里工作 jsfiddle 比较。

score 171 · Accepted Answer

对于那些有同样问题但采用响应式设计的人，您还可以使用：

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

div即使采用响应式设计，这样做也将始终使您的固定在屏幕上居中。

score 53 · Accepted Answer

您也可以为此使用 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>

score 37 · Accepted Answer

从上面的帖子中，我认为最好的方法是

有一个固定的 divwidth: 100%
在 div 中，使用 and 创建一个新的静态 div margin-left: auto，margin-right: auto或者为 table make it align="center"。
Tadaaaah，您现在已将固定 div 居中

希望这会有所帮助。

score 7 · Accepted Answer

普通 div 应该使用margin-left: autoand 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会居中，如果没有，就会与浏览器的边缘发生碰撞；类似于常规居中 div 的反应。

score 7 · Accepted Answer

水平居中：

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 中使用边距时不会限制元素的宽度

score 7 · Accepted Answer

<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;}

这应该做同样的事情。

score 5 · Accepted Answer

如果你想居中对齐一个固定位置的 div 垂直和水平使用这个

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

score 4 · Accepted Answer

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

 left: calc(50% - 200px);

score 2 · Accepted Answer

如果您希望元素像另一个导航栏一样跨越页面，则此方法有效。

width: calc (width: 100% - 其他任何偏离中心的宽度)

例如，如果您的侧边导航栏是 200px：

宽度：计算（100% - 200px）；

score 1 · Accepted Answer

我在 Twitter Bootstrap (v3) 中使用了以下内容

<footer id="colophon" style="position: fixed; bottom: 0px; width: 100%;">
    <div class="container">
        <p>Stuff - rows - cols etc</p>
    </div>
</footer>

即制作一个固定位置的全宽元素，然后将一个容器推入其中，容器相对于全宽居中。也应该表现得很好。

score 1 · Accepted Answer

1

使用宽度很容易：70%；左：15%；

将元素宽度设置为窗口的 70%，两边各留 15%

于 2013-12-13T03:30:13.100 回答

score 1 · Accepted Answer

传统方法.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%));
}

score 0 · Accepted Answer

使用弹性盒的解决方案；完全响应：

parent_div {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
}

child_div {
    /* whatever you want */
}

score 0 · Accepted Answer

您可以简单地执行以下操作：

div {
  background:pink;
  padding:20px;
  position:fixed;
  
  inset:0;
  margin:auto;
  width: max-content;
  height: max-content;
}

<div>Some content here</div>

score -1 · Accepted Answer

如果您不想使用包装方法。那么你可以这样做：

.fixed_center_div {
  position: fixed;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px; /* 50% of width */
  margin-top: -100px; /* 50% of height */
}

html - 居中对齐固定位置的 div

16 回答 16

Related

Reference