Question

有人能告诉我这段代码有什么问题吗？我试图将我的网页纵向和横向居中，但这不起作用！它不是我的中心。

<html>
<head>
    <title>String Functions</title>
    <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
    <script type="text/javascript">
    jQuery.fn.center = function() {
     this.css("position", "absolute");
     this.css("top", ($(document).height() - this.height()) / 2 + $(document).scrollTop() + "px");
     this.css("left", ($(document).width() - this.width()) / 2 + $(document).scrollLeft() + "px");
    return this;
    };

    $("#d1").center();
    </script>       
</head>

<body>

<div id="d1" style="background-color:red;width:100px; height: 100px;"></div>    

</body>

Answer 1

试试这个。

jQuery.fn.center = function() {
    this.css({
        "position" : "absolute",
        "top" : "50%",
        "left" : "50%",
        "margin-left" : (this.width() / 2) * -1,
        "margin-top" : (this.width() / 2) * -1
    });
};

将绝对定位元素居中的一种非常可靠的方法是将其位置从左侧或顶部设置为50％，然后将其边距设置为 - 对象的宽度或高度。

使用jQuery水平和垂直居中网页

1 个答案: