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;
}

调整div位置

3 个答案: