中心对齐固定位置div

问题描述 投票：0回答：17

我正在尝试让 

position:fixed
在我的页面上居中对齐。

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

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

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

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

有什么想法可以解决这个问题，以便我可以居中对齐固定定位的元素吗？

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

html css alignment css-position center
17个回答
295
投票

Koen 的答案 并没有完全将元素居中。

正确的方法是使用 CSS3 

transform
属性，尽管它在某些旧浏览器中不支持。我们甚至不需要设置固定或相对的
width
。

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


.almost-centered {
    background-color: #eee;
    position: fixed;
    width: 40%;
    text-align: center;
    top: 5%;
    left: 50%;
    padding: 20px;
    margin-left: -20%;
}

.centered {
    background-color: #eee;
    position: fixed;
    width: 40%;
    text-align: center;
    top: 25%;
    left: 50%;
    padding: 20px;
    transform: translate(-50%, 0);
}
<div class="almost-centered">
    I'm almost centered DIV lorem ipmsum
</div>

<div class="centered">
    I'm exactly centered DIV using CSS3
</div>

168
投票

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

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

这样做将使您的固定

div
始终保持在屏幕中央，即使采用响应式设计也是如此。

52
投票

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

36
投票

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

  1. 有一个固定的 div 
    width: 100%
  2. 在 div 内，使用 
    margin-left: auto
    和 
    margin-right: auto
    创建一个新的静态 div，或者对于表格，将其创建为 
    align="center"
    。
  3. Tadaaaah，你现在已经将固定 div 居中了

希望这会有所帮助。

11
投票

水平居中：

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

8
投票
<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;}

这应该起到同样的作用。

7
投票

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

6
投票

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

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

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

 left: calc(50% - 200px);
3
投票

.center { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }
的传统方法试图在居中元素周围保留一些空白空间，这通常会导致居中元素的宽度不理想，比如小于应有的宽度。

@proseosoc 的 answer 在这种情况下效果很好，并将居中元素的范围扩展到视口两侧的末端。然而，居中的元素会以整个视口（包括滚动条）为中心。但是，如果您的用例需要在没有滚动条的情况下将元素在空间内居中，则可以使用此修改后的答案。这种方法也类似于前面提到的传统方法，即在没有滚动条的情况下将元素集中在空间中。

水平居中

.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%));
}
2
投票

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

宽度：计算（宽度：100% - 任何其他偏离中心的宽度）

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

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

2
投票

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

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

1
投票

使用起来非常简单 宽度：70%； 左：15%；

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

1
投票

我将以下内容与 Twitter Bootstrap (v3) 一起使用

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

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

0
投票

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

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

child_div {
    /* whatever you want */
}
0
投票

要将位置固定元素居中，您可以使用以下 CSS：

.fixed-elem {
    position: fixed;
    background-color: brown;
    height: 100px; /* adjust as you want */
    width: 100px; /* adjust as you want */
    
    /* Center */
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    margin: auto;
}
<html lang="en">
<body>
    <div class="fixed-elem"></div>
</body>
</html>

-1
投票

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

.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 */
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.