属性为的div的中心元素

位置:固定

Html和Css代码

.jqbox_innerhtml { 位置:固定; 宽度:100%; 高度:100%; 显示:flex; justify-content:空间; 对齐项目:中心; 左:0; 上图:0; 宽度:100%; 高度:100%; 边框:5px实体#ccc; background - color: # fff; ｝ < div class = " jqbox_innerhtml”> 这应该在一个水平的 垂直居中的盒子。 < / div >

我就用这样的方法:

.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)。

唯一可靠的解决方案是使用表align=center，如下所示:

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

我无法相信世界各地的人们浪费这么多愚蠢的时间来解决这样一个基本的问题，如集中一个div. css解决方案并不适用于所有浏览器，jquery解决方案是一个软件计算解决方案，并不是一个其他原因的选择。

我已经浪费了太多的时间来避免使用桌子，但经验告诉我不要再这样做了。使用表格为div居中。在所有浏览器中都有效!再也不用担心了。

我使用vw(视口宽度)和vh(视口高度)。Viewport是你的整个屏幕。100vw是屏幕的总宽度，100vh是屏幕的总高度。

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}

如果你的div有一个已知的宽度和高度，那么你基本上需要将top和left设置为50%，以使div的左上角居中。你还需要将margin-top和margin-left设置为div高度和宽度的负一半，以将中心移向div的中间。

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

或者，如果你的div有一个动态的/未定义的宽度和/或高度，那么不是边距，而是将变换设置为div的相对宽度和高度的负一半。

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

或者，如果你的div至少有一个固定的宽度，你不关心垂直居中和老式浏览器(如IE6/7)，那么你也可以添加left: 0和right: 0到具有margin-left和margin-right为auto的元素，这样具有固定宽度的固定定位元素就知道它的左右偏移量从哪里开始。在你的情况下:

position: fixed;
width: 500px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

同样，如果你关心IE的话，这个功能只能在IE8+中工作，而且只能在水平方向上，而不是垂直方向上。

这个方法对我来说效果最好:

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;