中心位置：固定元素
我想表明一个position: fixed; 以dynamic宽度和高度为中心的popup框。 我用margin: 5% auto; 为了这。 无position: fixed; 它水平居中，但不垂直。 添加position: fixed; ，它甚至不是水平居中。
这是完整的集合：
.jqbox_innerhtml { position: fixed; width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; }
<div class="jqbox_innerhtml"> This should be inside a horizontally and vertically centered box. </div>
我如何将这个盒子放置在CSS的屏幕中？
你基本上需要设置top和left 50%的中心左上angular的股利。 您还需要将margin-top和margin-left设置为div高度和宽度的负值一半，以将中心移至div的中间位置。
因此，提供了一个<!DOCTYPE html> （标准模式），应该这样做：
position: fixed; width: 500px; height: 200px; top: 50%; left: 50%; margin-top: -100px; /* Negative half of height. */ margin-left: -250px; /* Negative half of width. */
或者，如果你不关心垂直和老的浏览器（例如IE6 / 7）的居中，那么你也可以添加left: 0和right: 0到margin-left和margin-right界auto的元素，这样具有固定宽度的固定定位元件知道其左右偏移开始的位置。 因此在你的情况下：
position: fixed; width: 500px; height: 200px; margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */ left: 0; right: 0;
再一次，这只适用于IE8 +，如果你关心IE浏览器，这只是横向不垂直。
我想使用dynamic宽度和高度在屏幕上居中显示一个popup框。
这是一个用dynamic宽度横向居中元素的现代方法 – 它适用于所有现代浏览器; 支持可以在这里看到 。
更新示例
.jqbox_innerhtml { position: fixed; left: 50%; transform: translateX(-50%); }
对于垂直和水平居中，您可以使用以下内容：
更新示例
.jqbox_innerhtml { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }
你也许希望添加更多供应商的前缀属性（参见示例）。
或者只添加left: 0和right: 0到您的原始的CSS，这使得它的行为类似于一个普通的非固定的元素，通常的自动保证金技术的工作原理：
.jqbox_innerhtml { position: fixed; width:500px; height:200px; background-color:#FFF; padding:10px; border:5px solid #CCC; z-index:200; margin: 5% auto; left: 0; right: 0; }
注意你需要使用一个有效的（X）HTML DOCTYPE才能在IE中正确运行（当然你也应该有！）
添加一个容器，如：
div { position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; }
然后把你的盒子放到这个div里去做这个工作。
对于新的浏览器，它的工作如果
left: 0; right: 0; top: (you can place any value, its work); margin: 0 auto;
只需添加：
left: calc(-50vw + 50%); right: calc(-50vw + 50%); margin-left: auto; margin-right: auto;
这个解决scheme不需要你为popup的div定义一个宽度和高度。
而不是计算popup窗口的大小，并减去一半的顶部，javascript的是调整popupContainer来填写整个屏幕…
（100％的高度，在使用display：table-cell时不起作用;（需要垂直居中的东西））…
无论如何，它的作品:)
left: 0; right: 0;
不在IE7下工作。
变成
left:auto; right:auto;
开始工作，但在其他浏览器停止工作！ 所以在IE7下面用这种方式
if ($.browser.msie && parseInt($.browser.version, 10) <= 7) { strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'}); }
一个可能的答案 ：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>CSS Center Background Demo</title> <style type="text/css"> body { margin: 0; padding: 0; } div.centred_background_stage_1 { position: fixed; z-index:(-1 ); top: 45%; left: 50%; } div.centred_background_stage_2 { position: relative; left: -50%; top: -208px; /* % does not work. According to the http://reeddesign.co.uk/test/points-pixels.html 6pt is about 8px In the case of this demo the background text consists of three lines with font size 80pt. 3 lines (with space between the lines) times 80pt is about ~3*(1.3)*80pt*(8px/6pt)~ 416px 50% from the 416px = 208px */ text-align: left; vertical-align: top; } #bells_and_wistles_for_the_demo { font-family: monospace; font-size: 80pt; font-weight: bold; color: #E0E0E0; } div.centred_background_foreground { z-index: 1; position: relative; } </style> </head> <body> <div class="centred_background_stage_1"> <div class="centred_background_stage_2"> <div id="bells_and_wistles_for_the_demo"> World<br/> Wide<br/> Web </div> </div> </div> <div class="centred_background_foreground"> This is a demo for <br/> <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed"> http://stackoverflow.com/questions/2005954/center-element-with-positionfixed </a> <br/><br/> <a href="http://www.starwreck.com/" style="border: 0px;"> <img src="./star_wreck_in_the_perkinnintg.jpg" style="opacity:0.1;"/> </a> <br/> </div> </body> </html>
尝试使用这将不正确居中的水平元素。
宽度：计算（宽度：100％ – 宽度无论其他中心偏离它 ）
例如，如果你的侧面导航栏是200px：
width: calc(100% - 200px);
你基本上可以把它换成另一个div ，并将其position fixed 。
CSS：
.bg{ position: fixed; width: 100%; } .jqbox_innerhtml { width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; }
HTML：
<div class="bg"> <div class="jqbox_innerhtml"> This should be inside a horizontally and vertically centered box. </div> </div>
唯一的万无一失的解决scheme是使用table align = center，如下所示：
<table align=center><tr><td> <div> ... </div> </td></tr></table>
我无法相信世界各地的人们浪费了这么多的时间来解决这样一个根本问题， css解决scheme不适用于所有浏览器，jquery解决scheme是一个软件计算解决scheme，并不是其他原因的选项。
我已经浪费了太多的时间来避免使用桌子，但经验告诉我不要再打架了。 使用表中心div。 在所有浏览器中始终工作！ 再也不用担心了。
