Web 中元素的水平居中和垂直居中

发布于 2018-04-05 20:27:48 字数 1356 浏览 1807 评论 0

在编写网页的时候,你可能面临着一个情况下,你需要使用纯 CSS 在水平方向和垂直方向居中一个 DIV。 有以下几个方法来实现这一点,并在此我要告诉你,涉及 CSS 和 jQuery 的我的最爱。 但首先基础知识:

水平居中

这是因为在一个div里面使用了margin属性:

.className{
   margin:0 auto;
   width:200px;
   height:200px;
 }

要只水平居中一个 DIV,您需要指定一个 width,margin 设置为auto。 此方法适用于块级元素。 将其应用到内联元素(如超链接和图像),你需要申请一个额外的规则 display:block 。

水平和垂直居中

水平和垂直居中一个 DIV 与 CSS 是比较麻烦一些。 您需要预先知道 DIV 的尺寸。

.className{
   width:300px;
   height:200px;
   position:absolute;
   left:50%;
   top:50%;
   margin:-100px 0 0 -150px;
 }

通过绝对定位元素,我们可以从它的周围取下,并指定相对于浏览器窗口的位置。 从左边窗口的上半部分抵销 50%你恰恰有其左上角在页面的中心。 我们剩下要做的唯一一件事就是在 DIV 移动到左侧和顶端有一半的宽度和高度与切缘阴性,要把它完全居中。

使用 jQuery 水平和垂直居中

正如前面提到的,CSS的方法只适用于 DIV 的固定尺寸。 这是 jQuery 的用武之地:

$(window).resize(function(){
    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });

});
// To initially run the function:
$(window).resize();

这段代码的功能是插入 $(window).resize() 语句,这是每一个窗口由用户调整大小时执行。 我们使用 outerWidth()和 outerHeight(),因为不同与常规的 width() 和 height()它们的填充和边框宽度添加到返回的大小。

最后我们模拟一个 resize 事件揭开围绕在页面加载的分区。 使用这种方法的好处是,你不需要知道有多大的分区是。 的主要缺点是,它只能使用 JavaScript 的工作环境。 然而这使得它非常适合丰富的用户界面(如Facebook的)。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。