js实现使元素在屏幕里上下左右居中

最新推荐文章于 2025-02-27 19:40:51 发布

nb_pdd

最新推荐文章于 2025-02-27 19:40:51 发布

阅读量4.1k

点赞数 1

文章标签： function class

本文链接：https://blog.youkuaiyun.com/nb_pdd/article/details/6047798

版权

本文介绍了一个使用jQuery实现的简单方法，能够使指定ID的HTML元素在其父窗口中水平垂直居中显示。此方法适用于需要快速调整页面布局的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>



<script type="text/javascript">

$(document).ready(function() {

    jQuery.fn.center = function() {

        this.css("position", "absolute");

        this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");

        this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");

        return this;

    }

    $("#id").center();

});

</script>






//ID为要在屏幕上下左右居中的元素ID，而不是class