我想做一个职位:固定;弹出框居中与屏幕的动态宽度和高度。我使用保证金:5% auto;对于这个。无位置:固定的;它的水平中心很好,但不是垂直中心。添加position: fixed;后,水平方向甚至没有居中。

以下是完整的一套:

.jqbox_innerhtml { 位置:固定; 宽度:500 px; 身高:200 px; 利润率:5%汽车; 填充:10 px; 边框:5px实体#ccc; background - color: # fff; } < div class = " jqbox_innerhtml”> 这应该在一个水平的 垂直居中的盒子。 < / div >

我如何中心这个框在屏幕与CSS?


当前回答

一个可能的答案是:

<!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>

其他回答

#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

在它里面可以是任何有差异宽度,高度或没有的元素。 全部居中。

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

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

这个解决方案不需要你为弹出式div定义宽度和高度。

http://jsfiddle.net/4Ly4B/33/

而不是计算弹出窗口的大小,减去一半到顶部,javascript正在调整popupContainer的大小以填充整个屏幕…

(100%高度,使用display:table-cell时不起作用;(需要将某物垂直居中))…

不管怎样,它是有效的:)

我想让一个弹出框的中心与动态宽度和高度的屏幕。

这是一个现代的方法,水平居中一个动态宽度的元素-它在所有现代浏览器;支持可以在这里看到。

更新的例子

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

对于垂直和水平居中,你可以使用以下方法:

更新的例子

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

您可能还希望添加更多的供应商前缀属性(参见示例)。

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

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