我想做一个职位:固定;弹出框居中与屏幕的动态宽度和高度。我使用保证金:5% auto;对于这个。无位置:固定的;它的水平中心很好，但不是垂直中心。添加position: fixed;后，水平方向甚至没有居中。
以下是完整的一套:
.jqbox_innerhtml { 位置:固定; 宽度:500 px; 身高:200 px; 利润率:5%汽车; 填充:10 px; 边框:5px实体#ccc; background - color: # fff; ｝ < div class = " jqbox_innerhtml”> 这应该在一个水平的 垂直居中的盒子。 < / div >
我如何中心这个框在屏幕与CSS?
当前回答
添加一个这样的容器:
div {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
然后把你的盒子放入这个div将做的工作。
编辑:正如评论中提到的，内部内容需要设置为display: inline-block，假设有两个div，比如:
<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;
}
加上外部div的left: 0;右:0;text-align: center这将使内部div居中对齐，而不显式地指定内部div的宽度。
其他回答
或者只是在原始CSS中添加left: 0和right: 0，这使得它的行为类似于常规的非固定元素，并且通常的自动边距技术也起作用:
.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中正确运行(当然，无论如何您都应该有..!)
我使用vw(视口宽度)和vh(视口高度)。Viewport是你的整个屏幕。100vw是屏幕的总宽度，100vh是屏幕的总高度。
.class_name{
width: 50vw;
height: 50vh;
border: 1px solid red;
position: fixed;
left: 25vw;top: 25vh;
}
唯一可靠的解决方案是使用表align=center，如下所示:
<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>
我无法相信世界各地的人们浪费这么多愚蠢的时间来解决这样一个基本的问题，如集中一个div. css解决方案并不适用于所有浏览器，jquery解决方案是一个软件计算解决方案，并不是一个其他原因的选择。
我已经浪费了太多的时间来避免使用桌子，但经验告诉我不要再这样做了。使用表格为div居中。在所有浏览器中都有效!再也不用担心了。
我用的方法很简单。例如，我有一个定位:固定的导航条，所以我调整它，在边缘留下一个小空间，像这样。
nav {
right: 1%;
width: 98%;
position: fixed;
margin: auto;
padding: 0;
}
其思想是取宽度的剩余百分比(在本例中为2%)并使用它的一半。
中心定位元件 (这是我所知道的最简单最好的方法)
position:fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%));
用于水平和垂直居中(如果高度与宽度相同)
position:fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
这两种方法都不会限制居中元素的宽度小于视口宽度，当在flexbox中使用边缘时，在居中元素内部
