entityMap|blocks|key|f2nqk|text|你也可以使用flexbox来实现这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|460ea|​|a8b41|.wrapper+{
++position:+fixed;
++top:+0;
++left:+0;
++height:+100%25;
++width:+100%25;
++
++/*+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;
}|code-block|syntax|javascript|75ta6|Your+element|9hu98^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|M|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|N|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|O|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|G|8|P|9|@]|A|@]|B|$H|I]]|$2|L|4|D|6|7|8|Q|9|@]|A|@]|B|$]]]]

You could use flexbox for this as well.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt; &lt;!-- Fixed element that spans the viewport --&gt;
 &lt;div class="element"&gt;Your element&lt;/div&gt; &lt;!-- your actual centered element --&gt;
&lt;/div&gt;</code></pre>
</div>
</div>

entityMap|blocks|key|faqon|text|从上面的帖子来看，我认为最好的方法是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|uosk|有一个固定的div|78i1o|在div中，使用以下命令创建一个新的静态div|7ined|和|4u2bj|，或for+table+make+it|dcad4|..。|6id55|Tadaaaah，你现在已经将你的固定div居中了|6re7t|希望这能有所帮助。^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Q|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|R|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|S|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|T|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|U|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|V|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|W|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|X|9|@]|A|@]|B|$]]]]

From the post above, I think the best way is 

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

Hope this will help.

entityMap|blocks|key|54hk3|text|对于那些有相同问题，但具有响应式设计的用户，您还可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8v8hq|width:+75%25;
position:+fixed;
left:+50%25;
margin-left:+-37.5%25;|code-block|syntax|javascript|7poh4|这样做将始终保持您的|eit94|以屏幕为中心，即使是响应式设计。^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|M|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|N|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|O|9|@]|A|@]|B|$]]]]

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

<pre><code>width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;
</code></pre>

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

entityMap|blocks|key|blsuk|text|宽度:+70%25；左侧:15%25；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5j706|将元素宽度设置为窗口的70%25，并在两侧保留15%25^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

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

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

entityMap|blocks|key|eh557|text|我在Twitter+Bootstrap+(v3)中使用了以下代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|125m9|Stuff+-+rows+-+cols+etc|code-block|syntax|javascript|19fgd|也就是说，制作一个固定位置的全宽元素，然后将一个容器推入其中，容器相对于全宽居中。也应该表现的很好。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|K|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|L|9|@]|A|@]|B|$]]]]

I used the following with Twitter Bootstrap (v3)

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

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.

entityMap|blocks|key|ct786|text|普通div应该使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|40kl7|和|b7qu8|，但这不适用于固定div。绕过这一步的方法类似于|47aof|安德鲁的回答|8kedn|，但不使用已弃用的|dlo1c|一件事。基本上，只要给固定的div一个包装器即可。|eo9ub|​|f294k|bgfk0|#wrapper+{
++++width:+100%25;
++++position:+fixed;
++++background:+gray;
}
#fixed_div+{
++++margin-left:+auto;
++++margin-right:+auto;
++++position:+relative;
++++width:+100px;
++++height:+30px;
++++text-align:+center;
++++background:+lightgreen;
}|code-block|syntax|javascript|dsc5i|77ckb^0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|W|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|X|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|Y|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|Z|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|10|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|11|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|12|9|@]|A|@]|B|$]]|$2|O|4|N|6|7|8|13|9|@]|A|@]|B|$]]|$2|P|4|Q|6|R|8|14|9|@]|A|@]|B|$S|T]]|$2|U|4|N|6|7|8|15|9|@]|A|@]|B|$]]|$2|V|4|N|6|7|8|16|9|@]|A|@]|B|$]]]]

Normal divs should use <code>margin-left: auto</code> and <code>margin-right: auto</code>, but that doesn't work for fixed divs. The way around this is similar to <a href="https://stackoverflow.com/a/10147652/241211">Andrew's answer</a>, but doesn't use the deprecated <code>&lt;center&gt;</code> thing. Basically, just give the fixed div a wrapper.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
 &lt;div id="fixed_div"&gt;&lt;/div&gt;
&lt;/div</code></pre>
</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.

entityMap|blocks|key|b843|text|Koen的答案并没有准确地将元素居中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|eol8b|正确的方法是使用|dbvcv|属性。尽管它是|d054r|某些旧浏览器不支持|bv8cq|..。我们甚至不需要设置一个固定的或相对的|7mc1h|..。|5up6h|.centered+{
++++position:+fixed;
++++left:+50%25;
++++transform:+translate(-50%25,+0);
}|code-block|syntax|javascript|f813g|工作jsfiddle比较|dns4d|这里|fmsrs^0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|W|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|X|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|Y|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|Z|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|10|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|11|9|@]|A|@]|B|$]]|$2|M|4|N|6|O|8|12|9|@]|A|@]|B|$P|Q]]|$2|R|4|S|6|7|8|13|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|14|9|@]|A|@]|B|$]]|$2|V|4|L|6|7|8|15|9|@]|A|@]|B|$]]]]

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

The proper way is to use <code>CCS3 transform</code> property. Although it's <a href="http://caniuse.com/#search=transform" rel="noreferrer">not supported in some old browsers</a>. And we don't even need to set a fixed or relative <code>width</code>.

<pre><code>.centered {
 position: fixed;
 left: 50%;
 transform: translate(-50%, 0);
}
</code></pre>

Working jsfiddle comparison <a href="http://jsfiddle.net/emzero/0v76tduL/" rel="noreferrer">here</a>.

entityMap|blocks|key|787gg|text|如果你知道宽度是400px，我想这将是最简单的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|48egu|left:+calc(50%25+-+200px);|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

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

<pre><code> left: calc(50% - 200px);
</code></pre>

entityMap|blocks|key|5kbnb|text|如果你想让元素像另一个导航栏一样跨越整个页面，这是可行的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2ufpp|width:+calc+(+width+:+100%25+-width，其他任何因素都不能居中)|duh4p|例如，如果您的侧导航栏是200px：|38lb|宽度:+calc(100%25+-+200px)；^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|J|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|K|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|L|9|@]|A|@]|B|$]]]]

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

entityMap|blocks|key|f6cca|text|如果想要垂直和水平对齐固定位置的div，请使用此|type|unstyled|depth|inlineStyleRanges|entityRanges|data|eq35t|position:+fixed;
left:+50%25;
top:+50%25;
transform:+translate(-50%25,-50%25);|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

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

<pre><code>position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
</code></pre>

entityMap|blocks|key|angio|text|使用flex+box的解决方案；完全响应：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4npb|parent_div+{
++++position:+fixed;
++++width:+100%25;
++++display:+flex;
++++justify-content:+center;
}

child_div+{
++++/*+whatever+you+want+*/
}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

A solution using flex box; fully responsive:

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

child_div {
 /* whatever you want */
}
</code></pre>

entityMap|blocks|key|em404|text|如果您不想使用包装器方法。然后你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7fg7v|.fixed_center_div+{
++position:+fixed;
++width:+200px;
++height:+200px;
++left:+50%25;
++top:+50%25;
++margin-left:+-100px;+/*+50%25+of+width+*/
++margin-top:+-100px;+/*+50%25+of+height+*/
}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

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

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

entityMap|blocks|key|33bfg|text|.container-div+{position:fixed;+left:+0;+bottom:+0;+width:+100%25;+margin:+0;}
.center-div+{width:+200px;+margin:+0+auto;}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|bj34u|这应该做同样的事情。|unstyled^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$C|D]]|$2|E|4|F|6|G|8|I|9|@]|A|@]|B|$]]]]

<pre><code>&lt;div class="container-div"&gt;
 &lt;div class="center-div"&gt;

 &lt;/div&gt;
&lt;/div&gt;

.container-div {position:fixed; left: 0; bottom: 0; width: 100%; margin: 0;}
.center-div {width: 200px; margin: 0 auto;}
</code></pre>

This should do the same.

entityMap|blocks|key|a1o3c|text|水平居中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3n6ru|display:+fixed;
top:+0;+
left:+0;
transform:+translate(calc(50vw+-+50%25));|code-block|syntax|javascript|clv4g|水平和垂直居中(如果其高度与宽度相同)：|ckavq|display:+fixed;
top:+0;+
left:+0;
transform:+translate(calc(50vw+-+50%25),+calc(50vh+-+50%25));|ftmk9|无副作用:在flexbox中使用页边距时不会限制元素的宽度^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|O|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|P|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|Q|9|@]|A|@]|B|$F|G]]|$2|L|4|M|6|7|8|R|9|@]|A|@]|B|$]]]]

Center it horizontally:
<pre><code>display: fixed;
top: 0; 
left: 0;
transform: translate(calc(50vw - 50%));
</code></pre>
Center it horizontally and vertically (if its height is same as width):
<pre><code>display: fixed;
top: 0; 
left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
</code></pre>
No side effect: It will not limit element's width when using margins in flexbox

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

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

<pre><code>left: 50%; width: 400px; margin-left:-200px
</code></pre>

...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&amp;M if you can tell me a better way to center align absolutely positioned elements than the way I've outlined above.

center aligning a fixed position div

响应式设计

容器

 我正在尝试获取一个具有以下特性的div 在我的页面上居中对齐。 我总是能够使用这个"hack“用绝对定位的div做到这一点。 left: 50%; width: 400px; margin-left:-200px ...where -left的值是div宽度的一半。 这似乎对固定位置的div不起作用，相反，它只是将它...

问居中对齐固定位置的div
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问居中对齐固定位置的divEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问居中对齐固定位置的div
EN