регулировка положения div

Question

Как я могу настроить div с точным центром экрана при любом разрешении с положением: абсолют. ??

Answer 1

Если у div есть известная ширина и высота, вы можете использовать отрицательное поле:

div {
    position: absolute;
    width: 800px;
    height: 500px;
    left: 50%;
    top: 50%;
    margin-top: -250px;
    margin-left: -400px;
}

Обратите внимание, что отрицательные поля составляют половину ширины и высоты.

Если размер div неизвестен или изменчив, вы должны использовать JavaScript. Вот как заставить это работать, используя jQuery:

$(function() {
    $(window).resize(function() {
        $('div.something').css({
            left: $(window).width() - ($(this).width() / 2),
            top: $(window).height() - ($(this).height() / 2)
        });
    });
    $(window).resize();
});

Answer 2

Следующий бит скрипта даст вам высоту и ширину видимого пространства в окне.

<script type="text/javascript">
        <!--
            function pageWidth() {
                return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
            }
            function pageHeight() {
                return window.innerHeight != null ? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null ? document.body.clientHeight : null;
            }
            function posLeft() {
                return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
            }
            function posTop() {
                return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
            }
            function posRight() {
                return posLeft() + pageWidth();
            } function posBottom() {
                return posTop() + pageHeight();
            }

            pageWidth()
            pageHeight()
        //-->
    </script>

Немного простой математики даст вам координаты xy центра экрана x = Ширина / 2 y = Высота / 2

установите верхнюю позицию на y + (DivHeight / 2), а левую позицию вашего погружения на x- (DivWidth / 2)

Answer 3

CSS Dead Center

selector {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}