Question

我需要在屏幕中央设置div块，但我不知道如何。

.pop-up{
    width: 850px;
    height: 640px;
    z-index: 10;
    left: 20%;
    position: fixed;
    top:1%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

应该有position:absolute;。

Answer 1

把它放在头上：

        <script>
        $(document).ready(function(){
            doResize();
            $(window).on('resize', doResize);
        });

        function doResize() {
            $('.center').css({
                position:'absolute',
                left: ($(window).width() - $('.center').outerWidth())/2,
                top: ($(window).height() - $('.center').outerHeight())/2
            });
        }
    </script>

并提供有问题的元素

class="center"

那样做。

Answer 2

将位置设为绝对值。并且顶部，底部，右侧，左侧为0.然后提供固定宽度并使用自动余量。这将使div居中。重要的是你需要使用固定的宽度和高度。请在此处查看演示。如果这不是您的解决方案，请告诉我......

[Demo](http://jsfiddle.net/U2FZj)

有关定位的更多信息，请按照下面的链接进行操作。下面的章节非常好

Detailed Positioning

Answer 3

如果您希望<div>位于屏幕中央，可以使用此功能：

.pop-up{
    z-index: 10;
    height: 640px;
    width: 850px;
    position: fixed;
    top: 50%;
    margin-top: -320px; /* half the height */
    left: 50%;
    margin-left: -425px; /* half the width */
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

Here's what it looks like

将div块设置在中心位置

3 个答案: