【问题标题】:CSS horizontal centering of a fixed div?固定div的CSS水平居中?
【发布时间】:2011-03-10 14:23:25
【问题描述】:
#menu {
    position: fixed;
    width: 800px;
    background: rgb(255, 255, 255); /* The Fallback */
    background: rgba(255, 255, 255, 0.8);
    margin-top: 30px;
}

我知道这个问题已经出现了一百万次,但是我找不到解决我的问题的方法。 我有一个 div,它应该固定在屏幕上,即使页面滚动它也应该始终保持在屏幕中间!

div 应该有500px 宽度,应该是30px 远离顶部(margin-top),对于所有浏览器尺寸,应该水平居中在页面中间,并且在滚动其余部分时不应移动页面。

这可能吗?

【问题讨论】:

标签: html css centering


【解决方案1】:
left: 50%;
margin-left: -400px; /* Half of the width */

【讨论】:

  • 当您调整浏览器窗口大小时,它无法按预期工作。
  • @Bahodir:你确定吗?调整大小对我来说是正确的。我认为这 -400 是由于 div 的宽度设置为 800
  • -1 这仅在您居中的元素具有永远不会改变的确切宽度时才有效。 Iron96 的答案要好得多。
  • 完全同意 - 这不是解决方案! 永远不要以这种方式硬编码。 -1
  • 我投了反对票,不是因为它在当时是一个糟糕的答案 - 这是一个很好的答案,而是因为它不再是,而下一个最高的答案需要它可以提供的所有帮助现在被视为最佳答案。昆汀:我认为在答案本身中编辑评论是一个好主意 - 然后我会推翻我的反对票。
【解决方案2】:

...或者您可以将菜单 div 包装在另一个中:

    <div id="wrapper">
       <div id="menu">
       </div>
    </div>


#wrapper{
         width:800px;
         background: rgba(255, 255, 255, 0.8);
         margin:30px auto;
         border:1px solid red;
    }

    #menu{
        position:fixed;
        border:1px solid green;
        width:300px;
        height:30px;
    }

【讨论】:

    【解决方案3】:

    如果使用内联块是一种选择,我会推荐这种方法:

    .container { 
        /* fixed position a zero-height full width container */
        position: fixed;
        top: 0; /* or whatever position is desired */
        left: 0;
        right: 0;
        height: 0;
        /* center all inline content */
        text-align: center;
    }
    
    .container > div {
        /* make the block inline */
        display: inline-block;
        /* reset container's center alignment */
        text-align: left;
    } 
    

    我在这里写了一篇短文:http://salomvary.github.com/position-fixed-horizontally-centered.html

    【讨论】:

    • 10x,这对我来说非常有用,无需为width 或其他东西硬编码任何数字——不像@Quentins 回答
    【解决方案4】:

    可以通过这种方式将 div 水平居中:

    html:

    <div class="container">
        <div class="inner">content</div>
    </div>
    

    css:

    .container {
        left: 0;
        right: 0;
        bottom: 0; /* or top: 0, or any needed value */
        position: fixed;
        z-index: 1000; /* or even higher to prevent guarantee overlapping */
    }
    
    .inner {
        max-width: 600px; /* just for example */
        margin: 0 auto;
    }
    

    使用这种方式,您将始终使您的内部块居中,此外,它可以轻松转换为真正的响应式(在示例中,它只会在较小的屏幕上流畅),因此在问题示例和选择的答案。

    【讨论】:

      【解决方案5】:

      编辑 2016 年 9 月:虽然偶尔能得到一个赞成票还是不错的,因为世界已经在发展,我现在会选择使用 transform 的答案(并且有很多赞成票)。我不会再这样了。

      另一种不必计算保证金或需要子容器的方法:

      #menu {
          position: fixed;   /* Take it out of the flow of the document */
          left: 0;           /* Left edge at left for now */
          right: 0;          /* Right edge at right for now, so full width */ 
          top: 30px;         /* Move it down from top of window */
          width: 500px;      /* Give it the desired width */ 
          margin: auto;      /* Center it */
          max-width: 100%;   /* Make it fit window if under 500px */ 
          z-index: 10000;    /* Whatever needed to force to front (1 might do) */
      }
      

      【讨论】:

      • @Joey bottom:0 是做什么的?即为什么需要它? (我已经有一段时间没有看到这个了!)
      • bottom:0 将确保菜单始终垂直居中,但我现在看到这不是 OP 所要求的。 :)
      • 我尝试在不同的上下文中使用它,但发现如果元素高度高于窗口(视口)高度,它不会在 FF 中居中
      • 因为世界已经在前进,我现在选择使用变换的答案。 (我之前发表过此评论,引用了回答者使用的名称 - 但他们更改了该名称,因此我的评论不再有意义,我将其删除 - 只需在此页面上搜索转换即可。)
      【解决方案6】:

      这是另一个二格解决方案。试图保持简洁而不是硬编码。一、预期的html:

      <div id="outer">
        <div id="inner">
          content
        </div>
      </div>
      

      下面的css的原理是定位“outer”的某个边,然后利用它假设“inner”的大小来相对移动后者。

      #outer {
        position: fixed;
        left: 50%;          // % of window
      }
      #inner {
        position: relative;
        left: -50%;         // % of outer (which auto-matches inner width)
      }
      

      这种方法类似于 Quentin 的方法,但内部可以是可变大小的。

      【讨论】:

        【解决方案7】:

        这里的答案已经过时了。现在您可以轻松地使用 CSS3 转换无需硬编码边距。这适用于所有元素,包括没有宽度或动态宽度的元素。

        水平中心:

        left: 50%;
        transform: translateX(-50%);
        

        垂直中心:

        top: 50%;
        transform: translateY(-50%);
        

        水平和垂直:

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

        兼容性不是问题:http://caniuse.com/#feat=transforms2d

        【讨论】:

        • +1 这个答案说明了 stackoverflow 的一个问题:旧的答案对他们的日子有好处并且被正确地接受了可以自豪地坐在上面,给人一种他们仍然合适的印象,而对于新的答案来说很好世界,就像这个世界一样,必须与困难搏斗。
        • @NickRice 100% 同意。这个答案应该是新接受的答案。初级开发者甚至不应该看到当前接受的答案!
        • @matt 请接受这个。滚动到很长以查看此内容。
        • 这会在内容元素的盒子阴影中产生模糊效果。
        • 是的,Chrome 错误地模糊了转换后的内容。文字也很模糊。但这是使固定元素居中而不使用硬编码和使用包装元素的唯一解决方案。如果你不关心背景的指针事件,你可以使用全屏包装器和 flexbox 来实现相同的效果,或者下面@salomvary 的解决方案。
        【解决方案8】:

        这是使用全屏包装 div 时的 flexbox 解决方案。 justify-content 将其子 div 水平居中,而 align-items 将其垂直居中。

        <div class="full-screen-wrapper">
            <div class="center"> //... content</div>
        </div>
        
        .full-screen-wrapper { 
          position: fixed;
          display: flex;
          justify-content: center;
          width: 100vw;
          height: 100vh;
          top: 0;
          align-items: center;
        }
        
        .center {
          // your styles
        }
        

        【讨论】:

        • 这个解决方案的问题是它使空白(div 的左右)中的任何内容都无法点击
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-07-11
        • 1970-01-01
        • 1970-01-01
        • 2012-07-27
        • 2014-04-08
        • 2023-01-23
        相关资源
        最近更新 更多