blocks|key|1209529|text|left:+50%25;
margin-left:+-400px;+/*+Half+of+the+width+*/|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1209530|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>left: 50%;
margin-left: -400px; /* Half of the width */
</code></pre>


blocks|key|1209567|text|..。或者，您可以将您的菜单div包装在另一个中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1209568|++++<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;
++++}|code-block|syntax|javascript|1209569|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>... or you can wrap you menu div in another:</p>

<pre><code>    &lt;div id="wrapper"&gt;
       &lt;div id="menu"&gt;
       &lt;/div&gt;
    &lt;/div&gt;


#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;
    }
</code></pre>


blocks|key|995310|text|如果使用内联块是一种选择，我建议使用这种方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|995311|.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;
}+|code-block|syntax|javascript|995312|我在这里写了一篇简短的文章：http://salomvary.github.com/position-fixed-horizontally-centered.html|offset|length|995313|entityMap|0|LINK|mutability|MUTABLE|url|http://salomvary.github.com/position-fixed-horizontally-centered.html^0|0|0|E|1X|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>If using inline-blocks is an option I would recommend this approach:</p>

<pre><code>.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 &gt; div {
    /* make the block inline */
    display: inline-block;
    /* reset container's center alignment */
    text-align: left;
} 
</code></pre>

<p>I wrote a short post on this here: <a href="http://salomvary.github.com/position-fixed-horizontally-centered.html" rel="noreferrer">http://salomvary.github.com/position-fixed-horizontally-centered.html</a></p>


blocks|key|995418|text|可以这样使div在水平方向居中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|995419|html：|995420|<div+class="container">
++++<div+class="inner">content</div>
</div>|code-block|syntax|javascript|995421|css：|995422|.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;
}|995423|使用这种方式，你将始终将你的内部块居中，此外，它可以很容易地转换为真正的响应式(在示例中，它将在较小的屏幕上是流动的)，因此在问题示例和选择的答案中没有限制。|995424|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>It is possible to horisontally center the div this way:</p>

<p>html:</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="inner"&gt;content&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>css:</p>

<pre><code>.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;
}
</code></pre>

<p>Using this way you will have always your inner block centered, in addition it can be easily turned to true responsive (in the example it will be just fluid on smaller screens), therefore no limitation in as in the question example and in the chosen answer.</p>


blocks|key|1209737|text|这是另一个两层的解决方案。尽量保持简明，而不是硬编码。首先，可预期的html：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1209738|<div+id="outer">
++<div+id="inner">
++++content
++</div>
</div>|code-block|syntax|javascript|1209739|下面的css背后的原则是定位“外部”的某一侧，然后利用它假设“内部”的大小相对移动后者的事实。|1209740|#outer+{
++position:+fixed;
++left:+50%25;++++++++++//+%25+of+window
}
#inner+{
++position:+relative;
++left:+-50%25;+++++++++//+%25+of+outer+(which+auto-matches+inner+width)
}|1209741|这种方法类似于Quentin的方法，但是内部的大小可以是可变的。|1209742|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Here's another two-div solution. Tried to keep it concise and not hardcoded. First, the expectable html:</p>

<pre><code>&lt;div id="outer"&gt;
  &lt;div id="inner"&gt;
    content
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The principle behind the following css is to position some side of "outer", then use the fact that it assumes the size of "inner" to relatively shift the latter. </p>

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

<p>This approach is similar to Quentin's, but inner can be of variable size.</p>


blocks|key|995493|text|下面是使用全屏包装器div时的flexbox解决方案。justify-content水平居中它的子div，align-items垂直居中它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|995494|<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
}|code-block|syntax|javascript|995495|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here's a flexbox solution when using a full screen wrapper div. justify-content centers it's child div horizontally and align-items centers it vertically.</p>

<pre><code>&lt;div class="full-screen-wrapper"&gt;
    &lt;div class="center"&gt; //... content&lt;/div&gt;
&lt;/div&gt;

.full-screen-wrapper { 
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  align-items: center;
}

.center {
  // your styles
}
</code></pre>


<pre><code>#menu {
    position: fixed;
    width: 800px;
    background: rgb(255, 255, 255); /* The Fallback */
    background: rgba(255, 255, 255, 0.8);
    margin-top: 30px;
}
</code></pre>

<p>I know this question is a million times out there, however I can't find a solution to my case.
I've got a div, which should be fixed on the screen, even if the page is scrolled it should always stay CENTERED in the middle of the screen!</p>

<p>The div should have <code>500px</code> width, should be <code>30px</code> away from the top (margin-top), should be horizontally centered in the middle of the page for all browser sizes and should not move when scrolling the rest of the page.</p>

<p>Is that possible?</p>


CSS horizontal centering of a fixed div?

#menu {    position: fixed;    width: 800px;    background: rgb(255, 255, 255); /* The Fallback */    background: rgba(255, 255, 255, 0.8);    margin-top: 30px;...

问CSS水平居中的固定div？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS水平居中的固定div？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS水平居中的固定div？
EN