中心对齐固定位置div

我正在尝试使div position:fixed在页面上居中对齐。

我始终能够使用此“ hack”与绝对定位的div做到这一点

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

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

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

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

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

Koen的答案并不能使元素居中。

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

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

这里工作jsfiddle比较。

对于具有相同问题但采用响应式设计的用户，也可以使用：

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

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

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

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

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

希望这会有所帮助。

普通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的反应。

如果要垂直和水平对齐居中对齐固定位置div，请使用此选项

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

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

 left: calc(50% - 200px);

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

这应该做相同的。

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

宽度：计算（宽度：100％-宽度，无论其他偏离中心）

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

宽度：calc（100％-200px）;

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

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

我在Twitter Bootstrap（v3）中使用了以下内容

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

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

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

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

child_div {
    /* whatever you want */
}

如果您不想使用包装方法。那么您可以执行以下操作：

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