sat*_*god 399 css css-position centering
我想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将此框置于屏幕中心？
Bal*_*usC 561
基本上,您需要设置top并left以50%居中div的左上角.您还需要设置margin-top和margin-left到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具有a margin-left和margin-rightof 的元素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;
同样,如果您关心IE,这仅适用于IE8 +,并且这仅在水平而非垂直居中.
Jos*_*ier 281
我想制作一个以动态宽度和高度为中心的弹出框.
这是一种现代方法,用于水平居中具有动态宽度的元素 - 它适用于所有现代浏览器; 支持可以在这里看到.
.jqbox_innerhtml {
position: fixed;
left: 50%;
transform: translateX(-50%);
}
对于垂直和水平居中,您可以使用以下内容:
.jqbox_innerhtml {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
您可能还希望添加更多供应商前缀属性(请参阅示例).
Wil*_*ott 131
或者只是添加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中正常运行(无论如何,您当然应该这样做..!)
Rom*_*'ai 21
添加一个容器,如:
div {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
然后把你的盒子放进这个div就可以了.
小智 16
只需添加:
left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
小智 9
#modal {
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
在它里面可以是任何具有不同宽度、高度或没有不同的元素。一切都在中心。
中心定位元件
当在居中元素内的flexbox 中使用边距时，它不会限制居中元素的宽度小于视口宽度（目前是一个非常好的解决方案）
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%));
小智 5
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'});
}
此解决方案不需要您为弹出div定义宽度和高度.
而不是计算弹出窗口的大小,减去一半到顶部,javascript正在调整popupContainer的大小以填充整个屏幕...
(100%高度,使用显示器时不起作用:table-cell;(需要垂直居中))...
无论如何它工作:)