居中位置:固定图元
我想使一个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在屏幕上居中显示此框？
回答 18
Stack Overflow用户
发布于 2010-01-05 20:39:37
您基本上需要将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为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，并且它只在水平方向居中，而不是在垂直方向居中。
Stack Overflow用户
发布于 2010-01-05 20:53:16
或者只需将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)超文本标记语言DOCTYPE，它才能在IE中正常运行(无论如何你都应该拥有它！)
Stack Overflow用户
发布于 2012-07-14 20:47:46
添加一个容器，如：
div {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}然后把你的盒子放到这个div里就可以了。
编辑:正如评论中提到的，假设有两个div，内部内容需要设置为display: inline-block：
<div class="outer">
<div class="inner">
content goes here
</div>
</div>那么内部的CSS需要是：
.outer {
position: fixed;
text-align: center;
left: 0;
right: 0;
}
.inner {
display: inline-block;
}与具有left: 0; right:0;和text-align: center的外部div一起，这将使内部div居中对齐，而不显式指定内部div的宽度。
https://stackoverflow.com/questions/2005954
复制相似问题