如何为居中的浮动确认对话框设计 CSS?

2022-01-15 00:00:00 dialog alignment html css center

我正在寻找一种方法来显示始终位于页面中心并浮动在页面上的确认对话框.

I'm looking for a way to display a confirm dialog that's always centered on the page, and floating over the page.

试过了，但它根本不是始终居中"，因为位置是固定的:

Tried that, but it's not 'always centered' at all, since the position is fixed:

.Popup
{
    text-align:center;
    position: absolute;
    bottom: 10%;
    left: 27%;
    z-index:50;
    width: 400px;
    background-color: #FFF6BD;
    border:2px solid black;
}

有什么想法吗?谢谢

推荐答案

试试这个CSS

#centerpoint {
    top: 50%;
    left: 50%;
    position: absolute;
}

#dialog {
    position: relative;

    width: 600px;
    margin-left: -300px;

    height: 400px;
    margin-top: -200px;
}


<div id="centerpoint">
    <div id="dialog"></div>
</div>

#centerpoint应该是对话框的容器div

#centerpoint should be the container div of the dialog

注意 #centerpoint DIV 应该在 body 元素内或在没有 的元素内>位置:相对；属性

Note that the #centerpoint DIV should be inside the body element or inside elements that don't have a position: relative; property

相关文章