我想在屏幕中心设置一个position: fixed;弹出框，其动态宽度和高度。我使用了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将此框置于屏幕中心？
答案 0 :(得分：525)
您基本上需要将top和left设置为50%，以便将div的左上角居中。您还需要将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的{{1}}，以便具有固定宽度的固定定位元素知道其左右偏移开始的位置。在你的情况下：
auto同样，如果您关心IE，这只适用于IE8 +，并且它只是水平居中而不是垂直居中。
答案 1 :(得分：250)
我想在屏幕中心设置一个动态宽度和高度的弹出框。
这是一种使用动态宽度水平居中的元素的现代方法 - 它适用于所有现代浏览器; support can be seen here
.jqbox_innerhtml {
position: fixed;
left: 50%;
transform: translateX(-50%);
}
对于垂直和水平居中，您可以使用以下内容：
.jqbox_innerhtml {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
您可能希望添加更多供应商前缀属性（请参阅示例）。
答案 2 :(得分：127)
或者只是将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中正确行事（无论如何你当然应该......）。
答案 3 :(得分：21)
添加如下容器：
div {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
然后把你的盒子放进这个div中就可以了。
答案 4 :(得分：14)
只需添加：
left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
答案 5 :(得分：5)
此解决方案不需要您为弹出窗口定义宽度和高度。
而不是计算弹出窗口的大小，而是减半到顶部，javascript正在调整popupContainer的大小以填满整个屏幕......
（100％高度，使用显示器时不起作用：table-cell;（需要垂直居中））...
无论如何它有效：）
答案 6 :(得分：4)
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'});
}
答案 7 :(得分：3)
这个对我来说效果最好：
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
答案 8 :(得分：2)
您基本上可以将其包装到另一个div并将其position设置为fixed。
.bg {
position: fixed;
width: 100%;
}
.jqbox_innerhtml {
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}<div class="bg">
<div class="jqbox_innerhtml">
This should be inside a horizontally and vertically centered box.
</div>
</div>
答案 9 :(得分：1)
要固定位置，请使用此：-
div {
position: fixed;
left: 68%;
transform: translateX(-8%);
}
答案 10 :(得分：1)
我使用了vw（视口宽度）和vh（视口高度）。视口就是您的整个屏幕。 100vw是屏幕的总宽度，100vh是屏幕的总高度。
.class_name{
width: 50vw;
height: 50vh;
border: 1px solid red;
position: fixed;
left: 25vw;top: 25vh;
}
答案 11 :(得分：1)
简单，尝试一下
position: fixed;
width: 500px;
height: 300px;
top: calc(50% - 150px);
left: calc(50% - 250px);
background-color: red;
答案 12 :(得分：0)
一种可能的answer：
<!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>
答案 13 :(得分：0)
尝试将此用于不能正确居中的水平元素。
宽度：计算（宽度：100％ - 宽度，其他任何偏离中心）
例如，如果您的侧面导航栏为200px：
width: calc(100% - 200px);
答案 14 :(得分：0)
#modal {
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
内部可以是宽度不同，高度不同或不具有其他不同的任何元素。 全部都居中。
答案 15 :(得分：0)
我只是使用这样的东西：
.c-dialogbox {
--width: 56rem;
--height: 32rem;
position: fixed;
width: var(--width);
height: var(--height);
left: calc( ( 100% - var(--width) ) / 2 );
right: calc( ( 100% - var(--width) ) / 2 );
top: calc( ( 100% - var(--height) ) / 2 );
bottom: calc( ( 100% - var(--height) ) / 2 );
}
它使对话框在水平和垂直方向上居中，并且我可以使用不同的宽度和高度来适应不同的屏幕分辨率，以响应媒体查询。
如果您仍需要为不支持CSS自定义属性或calc()的浏览器提供支持（请选中caniuse），则不是一种选择。
答案 16 :(得分：0)
当您不知道要居中的事物的大小并且您希望它在所有屏幕尺寸中居中时，这将非常有用：
.modal {
position: fixed;
width: 90%;
height: 90%;
top: 5%; /* (100 - height) / 2 */
left: 5%; /* (100 - width) / 2 */
}
答案 17 :(得分：0)
我用的很简单。例如，我有一个 position : fixed 的导航栏，因此我将其调整为像这样在边缘留出一个小空间。
nav {
right: 1%;
width: 98%;
position: fixed;
margin: auto;
padding: 0;
}
这个想法是取宽度的剩余百分比“在这种情况下为 2%”并使用它的一半。
答案 18 :(得分：-11)
唯一的万无一失的解决方案是使用table align = center，如下所示：
<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>
我无法相信全世界的人们都在浪费这些丰富的时间去解决像居中这样的基本问题。 css解决方案并不适用于所有浏览器，jquery解决方案是一种软件计算解决方案，并且由于其他原因而不是一种选择。
我浪费了太多时间以避免使用桌子，但经验告诉我要停止对抗它。使用表格来居中div。在所有浏览器中始终有效！再也不用担心了。