加载完css后再弹对话框,css - 如何将div弹出对话框定位到浏览器屏幕的中心？ - 堆栈内存溢出...

===============>>#1 票数：19

.popup-content-box{

position:fixed;

left: 50%;

top: 50%;

-ms-transform: translate(-50%,-50%);

-moz-transform:translate(-50%,-50%);

-webkit-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

}

===============>>#2 票数：17 已采纳

在这里，这个工作。 :)

upd：以防万一jsfiddle没有响应，这里是代码...

CSS：

.holder{

width:100%;

display:block;

}

.content{

background:#fff;

padding: 28px 26px 33px 25px;

}

.popup{

border-radius: 7px;

background:#6b6a63;

margin:30px auto 0;

padding:6px;

// here it comes

position:absolute;

width:800px;

top: 50%;

left: 50%;

margin-left: -400px; // 1/2 width

margin-top: -40px; // 1/2 height

}

HTML：

some lengthy text

===============>>#3 票数：5

您可以使用CSS3'transform'：

CSS：

.popup-bck{

background-color: rgba(102, 102, 102, .5);

position: fixed;

width: 100%;

height: 100%;

top: 0;

left: 0;

z-index: 10;

}

.popup-content-box{

background-color: white;

position: fixed;

top: 50%;

left: 50%;

z-index: 11;

-webkit-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

-o-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

HTML：

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

*因此您不必使用margin-left: -width/2 px;

===============>>#4 票数：5

我在jquery中编写代码。 没有看到一个简单的方法。 但我希望它对您有用。

.popup{

border: 4px solid #6b6a63;

width: 800px;

border-radius :7px;

margin : auto;

padding : 20px;

position:fixed;

}

some lengthy text

some lengthy text

some lengthy text

some lengthy text

some lengthy text

some lengthy text

some lengthy text

some lengthy text

$(document).ready(function(){

var popup_height = document.getElementById('popup').offsetHeight;

var popup_width = document.getElementById('popup').offsetWidth;

$(".popup").css('top',(($(window).height()-popup_height)/2));

$(".popup").css('left',(($(window).width()-popup_width)/2));

});

===============>>#5 票数：2

===============>>#6 票数：2

注意：这不会直接回答您的问题。 这是故意的。

它有许多示例，其中包括您的特定问题。 我强烈推荐它。

===============>>#7 票数：1

找到合适的组合花了一段时间，但这似乎使叠加或弹出式内容在水平和垂直方向上居中， 而无需事先知道内容的高度 ：

HTML：

Your content

CSS：

.overlayShadow {

display: table;

position: fixed;

left: 0px;

top: 0px;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.75);

z-index: 20;

}

.overlayBand {

display: table-cell;

vertical-align: middle;

}

.overlayBox {

display: table;

margin: 0 auto 0 auto;

width: 600px; /* or whatever */

background-color: white; /* or whatever */

}

===============>>#8 票数：0

一种解决方案，其中我们不需要知道对话框的宽度/高度，然后假定边距。

HTML：

stuffs

CSS：

#dialog-contain { // full page container.

position: absolute;

height: 100%;

width: 100%;

top: 0;

left: 0;

...

}

#block { // another container simply with display:flex.

display: flex;

height: 100%;

width: 100%;

justify-content: center;

}

#centered { // another container that is always centered.

align-self: center;

}

===============>>#9 票数：0

我认为您需要将.holder position:relative;设为position:relative; 和.popup position:absolute;

ask by S K translate from so