Question

我正在尝试在我的网页上找到一个position:fixed居中对齐的div。

我总是能够使用这个“hack”

来完成定位的div

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

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

这似乎不适用于固定位置div，而只是将它们的最左边角放置在50％并忽略左边缘声明。

有关如何解决此问题的任何想法，以便我可以对齐固定定位的元素？

如果你能告诉我一个更好的方法来对齐绝对定位的元素而不是我上面概述的方式，我会投入M＆amp; M奖金。

Answer 1

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

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

即使采用快速响应的设计，这样做也会始终将固定div置于屏幕中央。

Answer 2

Koen的答案并不完全是元素的中心。

正确的方法是使用CCS3 transform属性。虽然它是not supported in some old browsers。我们甚至不需要设置固定或相对width。

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

工作jsfiddle比较here。

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

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

拥有width: 100%
在div中，使用margin-left: auto和margin-right: auto创建一个新的静态div，或者使表格align="center"。
Tadaaaah，你现在把你固定的div集中在一起

希望这会有所帮助。

Answer 5

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

＆＃13;

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

＆＃13;

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

＆＃13;

这将使div中的固定div居中，同时允许div对浏览器做出反应。即如果有足够的空间，div将居中，但如果没有，则会与浏览器的边缘发生冲突。类似于常规居中的div如何反应。

Answer 6

水平居中：

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 7

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

 left: calc(50% - 200px);

Answer 8

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

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

Answer 9

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

宽度：calc（宽度：100％ - 其他任何偏离中心的宽度）

例如，如果您的侧面导航栏为200px：

宽度：计算（100％ - 200px）;

Answer 10

我在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 11

使用非常简单宽度：70％; 左：15％;

将元素宽度设置为窗口的70％，并在两侧留下15％

Answer 12

使用柔性盒的解决方案;完全响应：

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

child_div {
    /* whatever you want */
}

Answer 13

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

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

Answer 14

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

这应该做同样的事情。

中心对齐固定位置div

14 个答案: