Web 中元素的水平居中和垂直居中 - 文章教程

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

发布于 2018-04-05 字数 1861 浏览 1646 评论 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的)。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0