居中对齐固定位置 div

Question

我正在尝试获取一个在我的页面上具有position:fixed中心对齐的 div。

我总是能够使用这个“hack”用绝对定位的 div 来做到这一点

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

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

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

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

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

Answer 1

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

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

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

在这里工作 jsfiddle 比较。

Answer 2

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

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

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

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>

Answer 4

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

1. 有一个固定的 div width: 100%
2. 在 div 内，使用margin-left: auto和margin-right: auto制作一个新的静态 div，或者对于 table 使其align="center" 。
3. Tadaaaah，您现在已将固定 div 居中

希望这会有所帮助。

Answer 5

普通 div 应该使用margin-left: auto和margin-right: auto ，但这不适用于固定div。 解决这个问题的方法类似于安德鲁的回答，但不使用已弃用的<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 的反应。

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

这应该做同样的事情。

Answer 7

如果要在垂直和水平方向上居中对齐固定位置 div，请使用此

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

Answer 8

水平居中：

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

Answer 9

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

 left: calc(50% - 200px);

Answer 10

如果您希望元素像另一个导航栏一样横跨整个页面，这将起作用。

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

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

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

Answer 11

使用 width: 70% 很容易； 左：15%；

将元素宽度设置为窗口的 70% 并在两侧保留 15%

Answer 12

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

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

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

Answer 13

一个使用flex box的解决方案； 完全响应：

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

child_div {
    /* whatever you want */
}

Answer 14

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

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

 <div>Some content here</div>

Answer 15

.center { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } .center { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } .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%));
}

Answer 16

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

.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 */
}