中心对齐固定位置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和创建一个新的静态div margin-right: auto,或者用于表格align="center".
3. Tadaaaah,你现在已经集中了你的固定div

希望这会有所帮助.

Answer 5

普通的div应该用margin-left: auto和margin-right: auto,但这并不固定div的工作.解决这个问题的方法类似于Andrew的答案,但不使用弃用的<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 中使用边距时不会限制元素的宽度