当前位置： 文江博客话题详情

中心对齐固定位置 div

发布于 2024-09-01 16:32:46 字数 386 浏览 5 评论 0原文

我正在尝试获取一个在页面上居中对齐 position:fixed 的 div。

我一直能够使用这个“hack”来使用绝对定位的 div 来做到这一点

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

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

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

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

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

原文

I'm trying to get a div that has position:fixed center aligned on my page.

I've always been able to do it with absolutely positioned divs using this "hack"

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

...where the value for margin-left is half the width of the div.

This doesn't seem to work for fixed position divs, instead it just places them with their left-most corner at 50% and ignores the margin-left declaration.

Any ideas of how to fix this so I can center align fixed positioned elements?

And I'll throw in a bonus M&M if you can tell me a better way to center align absolutely positioned elements than the way I've outlined above.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（19）

阪姬 2024-09-08 16:32:46

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

正确的方法是使用 CSS3 transform 属性，尽管它在某些旧浏览器中不支持< /a>.我们甚至不需要设置固定或相对宽度。

.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>

Koen's answer doesn't exactly center the element.

The proper way is to use CSS3 transform property, although it's not supported in some old browsers. We don't even need to set a fixed or relative 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>

回复 原文
荒芜了季节 2024-09-08 16:32:46

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

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

这样做将使您的固定 div 始终保持在屏幕中央，即使采用响应式设计也是如此。

For the ones having this same problem, but with a responsive design, you can also use:

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

Doing this will always keep your fixed div centered on the screen, even with a responsive design.

回复 原文
好多鱼好多余 2024-09-08 16:32:46

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

You could use flexbox for this as well.

.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>

回复 原文
静若繁花 2024-09-08 16:32:46

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

  1. 有一个固定的div，宽度：100％
  2. 在div内，使用margin-left：auto创建一个新的静态div并margin-right: auto，或者对于表格，将其设为align="center"。
  3. Tadaaaah，您现在已将固定 div 居中

希望这会有所帮助。

From the post above, I think the best way is

  1. Have a fixed div with width: 100%
  2. Inside the div, make a new static div with margin-left: auto and margin-right: auto, or for table make it align="center".
  3. Tadaaaah, you have centered your fixed div now

Hope this will help.

回复 原文
杀お生予夺 2024-09-08 16:32:46

水平居中：

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

Center it horizontally:

display: fixed;
top: 0; 
left: 0;
transform: translate(calc(50vw - 50%));

Center it horizontally and vertically (if its height is same as width):

display: fixed;
top: 0; 
left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));

No side effect: It will not limit element's width when using margins in flexbox

回复 原文
烦人精 2024-09-08 16:32:46
<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 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;}

This should do the same.

回复 原文
樱娆 2024-09-08 16:32:46

普通 div 应该使用 margin-left: auto 和 margin-right: auto，但这不适用于固定 div。解决此问题的方法类似于 Andrew 的答案，但不使用已弃用的

东西。基本上，只需给固定 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 的反应。

Normal divs should use margin-left: auto and margin-right: auto, but that doesn't work for fixed divs. The way around this is similar to Andrew's answer, but doesn't use the deprecated <center> thing. Basically, just give the fixed div a wrapper.

#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

This will center a fixed div within a div while allowing the div to react with the browser. i.e. The div will be centered if there's enough space, but will collide with the edge of the browser if there isn't; similar to how a regular centered div reacts.

回复 原文
信仰 2024-09-08 16:32:46

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

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

If you want to center aligning a fixed position div both vertically and horizontally use this

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
回复 原文
爱的故事 2024-09-08 16:32:46

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

 left: calc(50% - 200px);

If you know the width is 400px this would be the easiest way to do it I guess.

 left: calc(50% - 200px);
回复 原文
在你怀里撒娇 2024-09-08 16:32:46

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

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

You can simply do the following:

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

回复 原文
负佳期 2024-09-08 16:32:46

常规做法是.center {position:fixed;左：50%；顶部：50%；变换：翻译（-50%，-50%）； } 尝试在居中元素周围保留一些空白空间，这通常会导致居中元素的宽度不理想，例如小于应有的宽度。

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

水平居中

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

The conventional approach of .center { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } tries to keep some empty space around the centered element which often causes the centered element's width to not be ideal like being smaller than what it should be.

@proseosoc's answer works well in that scenario and extends the centered element's reach to the end of the viewport sides. The centered element, however, gets centered to the entire viewport including the scrollbar. But if your use case requires centering elements within space without the scrollbar, you can use this modified answer. This approach is also similar to the aforementioned conventional approach which centers elements in space without the scrollbar.

Center horizontally

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

Center vertically

.vertical-center {
  position: fixed;
  top: calc((50vh - 50%) * -1);
  transform: translate(0, calc(50vh - 50%));
}

Center horizontally and vertically

.center {
  position: fixed;
  left: calc((50vw - 50%) * -1);
  top: calc((50vh - 50%) * -1);
  transform: translate(calc(50vw - 50%), calc(50vh - 50%));
}
回复 原文
如日中天 2024-09-08 16:32:46

要将位置固定元素居中，您可以使用以下 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>

To center a position fixed element you can use the following 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>

回复 原文
故事未完 2024-09-08 16:32:46

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

width: calc (width: 100% - 任何偏离中心的宽度)

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

width: calc(100% - 200px);

This works if you want the element to span across the page like another navigation bar.

width: calc (width: 100% - width whatever else is off centering it)

For example if your side navigation bar is 200px:

width: calc(100% - 200px);

回复 原文
云醉月微眠 2024-09-08 16:32:46

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

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

It is quite easy using
width: 70%;
left:15%;

Sets the element width to 70% of the window and leaves 15% on both sides

回复 原文
嗼ふ静 2024-09-08 16:32:46

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

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

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

I used the following with Twitter Bootstrap (v3)

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

I.e make a full width element that is fixed position, and just shove a container in it, the container is centered relative to the full width. Should behave ok responsively too.

回复 原文
北凤男飞 2024-09-08 16:32:46

我总是更喜欢在 div 居中时使用 margin: auto 。

对于position:fixed的元素，如果指定top:0, right:0,bottom:0, left:0，则可以使用margin： auto 就可以了。

#fixed_div {
    /* Setup */
    width: 100px;
    height: 30px;
    text-align: center;
    background: lightgreen;
    position: fixed;

    /* Centering div */
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    margin-left: auto;
    margin-right: auto;


}
<p>
I am a body of text that will be beneath the fixed div. Forever and forever. It is unfortunately my destiny to be this low-lying text that no one cares about. Sometimes, I wonder why I was brought into this world. 
</p>
 <div id="fixed_div"></div>

I always prefer using margin: auto when centering divs.

For an element that has position: fixed, if you specify top:0, right:0, bottom:0, left:0, you can use margin:auto and that works.

#fixed_div {
    /* Setup */
    width: 100px;
    height: 30px;
    text-align: center;
    background: lightgreen;
    position: fixed;

    /* Centering div */
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    margin-left: auto;
    margin-right: auto;


}
<p>
I am a body of text that will be beneath the fixed div. Forever and forever. It is unfortunately my destiny to be this low-lying text that no one cares about. Sometimes, I wonder why I was brought into this world. 
</p>
 <div id="fixed_div"></div>

回复 原文
苍暮颜 2024-09-08 16:32:46

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

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

child_div {
    /* whatever you want */
}

A solution using flex box; fully responsive:

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

child_div {
    /* whatever you want */
}
回复 原文
巷子口的你 2024-09-08 16:32:46

我想分享具有居中 div、居中文本内容以及明确宽度和高度的答案。如果您不关心尺寸，您可以通过 特马尼·阿菲夫。

.fixed-centered {
  /* content position */
  display: flex;
  justify-content: center;
  align-items: center;

  /* div position */
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* visual styling */
  width: 300px;
  height: calc(100% - 50px);
  background: lightgreen;
}
<div class="fixed-centered">Fixed centered div</div>

<p>
  Eius tempora sequi voluptatem enim corporis veritatis. Et quis praesentium dolorem nobis. Rerum voluptatibus fugit asperiores autem. Quod et quaerat quasi asperiores. Voluptates incidunt et ea quia neque cupiditate. Corrupti non et sit quae quo officia
  eos aliquid.
</p>

I want to share answer that have centered div, centered text content AND explicit width and height. If you don't care about sizing you may take a look to padding solution by Temani Afif.

.fixed-centered {
  /* content position */
  display: flex;
  justify-content: center;
  align-items: center;

  /* div position */
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* visual styling */
  width: 300px;
  height: calc(100% - 50px);
  background: lightgreen;
}
<div class="fixed-centered">Fixed centered div</div>

<p>
  Eius tempora sequi voluptatem enim corporis veritatis. Et quis praesentium dolorem nobis. Rerum voluptatibus fugit asperiores autem. Quod et quaerat quasi asperiores. Voluptates incidunt et ea quia neque cupiditate. Corrupti non et sit quae quo officia
  eos aliquid.
</p>

回复 原文
定格我的天空 2024-09-08 16:32:46

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

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

if you don't want to use the wrapper method. then you can do this:

.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 */
}
回复 原文
~没有更多了~

关于作者

埖埖迣鎅

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文