使用jQuery创建水平和垂直居中的网站
发布时间：2018-08-28 07:29:59 所属栏目：传媒 来源：站长网
导读：最近在做一个红酒相关的网站，因为对设计要求比较高，所以做了一个图片感比较强的网站，但是发现在大 分辨率 ，特别是4:3的时候很奇怪，所以想让网页水平垂直都居中，就是让一个div实现水平和垂直居中，虽然好几种方式实现，但是今天介绍时我最喜欢的方法
|
最近在做一个红酒相关的网站，因为对设计要求比较高，所以做了一个图片感比较强的网站，但是发现在大分辨率，特别是4:3的时候很奇怪，所以想让网页水平垂直都居中，就是让一个div实现水平和垂直居中，虽然好几种方式实现，但是今天介绍时我最喜欢的方法，通过css和jQuery实现。 1、通过css实现水平居中： Copy to Clipboard 引用的内容：[www.veryhuo.com]
.className{ margin:0 auto; width:200px; height:200px; } 2、通过css实现水平居中和垂直居中 通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情，您必须事先知道另外一个div的尺寸： Copy to Clipboard 引用的内容：[www.veryhuo.com]
.className{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px; } 3、通过jQuery实现 水平居中和垂直居中前面已经提到过了，css的方法只适用于有固定尺寸的div，所以到jQuery发挥作用了： Copy to Clipboard引用的内容：[www.veryhuo.com]
$(window).resize(function(){ $('.className').css({ position:'absolute', left: ($(window).width() - $('.className').outerWidth())/2, top: ($(window).height() - $('.className').outerHeight())/2 }); }); //初始化函数 $(window).resize(); （编辑：南京站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读