中心对齐固定位置 div

我试图得到一个在我的页面上有 position:fixed中心对齐的 div。

我总是能够使用这种“黑客技术”在绝对定位的 div 上做到这一点

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

左边距的值是 div 宽度的一半。

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

有什么办法可以解决这个问题，这样我就可以中心对齐固定的位置元素？

如果你能告诉我一个更好的方法来使绝对定位的元素居中对齐，我会给你一个额外的 M & M。

261442 次浏览
小开

你也可以使用 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. 使用 width: 100%有一个固定的 div
  2. 在 div 内部，使用 margin-left: auto和 margin-right: auto创建一个新的静态 div，或者为表创建 align="center"。
  3. Tadaaaah，你现在已经把你的固定 div 放在中心了

希望这个能帮上忙。

小开

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

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

这样做将始终保持您的固定 div在屏幕中心，即使与响应设计。

小开

这是相当容易使用 宽度: 70% ; 左: 15% ;

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

小开

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

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

例如，创建一个固定位置的全宽元素，然后将一个容器放入其中，容器相对于全宽居中。也应该做出反应。

小开

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

小开

Koen 的回答并没有把元素放在中心。

正确的方法是使用 CSS3transform属性，尽管它是 在一些旧的浏览器中不支持。我们甚至不需要设置一个固定的或相对的 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>

小开

如果你知道宽度是400像素，这将是最简单的方法做到这一点，我想。

 left: calc(50% - 200px);
小开

如果您希望元素像另一个导航栏一样横跨整个页面，那么可以这样做。

宽度: calc (宽度: 100% 宽度，其他任何偏离中心的部分)

例如，如果你的侧边导航栏是200px:

宽度: calc (100%-200px) ;

小开

如果你想在中心对齐一个固定的位置，纵向和横向的 div 都可以使用这个

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

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

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 */
}
小开 
<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;}

这个应该也一样。

小开

水平居中:

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%));

没有副作用: 它不会限制元素的宽度时使用边距在柔性箱

小开

你可以简单地做到以下几点:

div {
background:pink;
padding:20px;
position:fixed;
  

inset:0;
margin:auto;
width: max-content;
height: max-content;
}
<div>Some content here</div>

小开

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

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

水平居中

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

提交答案