插件描述：如何用CSS＆jQuery的垂直和水平方向的固定的或流体的div居中。
如何用CSS＆jQuery的垂直和水平方向的固定的或流体的div居中。
使用步骤
居中使用纯CSS元素的方法有很多。下面的脚本有用纯CSS不切确（例如流体布局，元素高度是未知等）时的情况。中心内一个div其父元素的关键，越来越宽或越来越高，并正确设置它的CSS位置。使用jQuery，我们可以很容易地获取这些值，即使他们没有在CSS或者他们设置为百分比。然后，我们可以居中所需的计算和应用元素（S）上的输出值。
例如，下面的标记是一个流体宽度高度设置为“ 自动“的 div ：
No wrapHTML
<body> <div id="myDiv">居中内容数据 </div> </body>
No wrapCSS
body{
margin:0;
padding:0;
}
#myDiv{
width:70%;
height:auto;
background:#ccc;
}＃myDiv在其父元素，我们将创建一个jQuery功能，并通过作为其选择的div的id。
首先，您的html文件头标签里面包括jQuery库：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
(function($){
$(document).ready(function(){
$.fn.center=function(){
return this.each(function(){
var $this=$(this),
parent=$this.parent(),
topPos,
topMargin,
leftMargin,
resizeTimeout;
if(parent.is("body:not(.root-height-set)")){
$("html,body").css("height","100%").addClass("root-height-set");
}
if($this.css("position")==="absolute" || $this.css("position")==="fixed"){
topPos="50%";
topMargin="-"+Math.round($this.outerHeight()/2)+"px";
leftMargin="-"+Math.round($this.outerWidth()/2)+"px";
$this.css({"left":"50%","margin-left":leftMargin});
}else{
topPos=Math.floor((parent.height()-$this.outerHeight())/2);
topMargin="auto";
$this.css({"position":"relative","margin-left":"auto","margin-right":"auto"});
}
$this.css({"top":topPos,"margin-top":topMargin});
$(window).resize(function(){
if(resizeTimeout){
clearTimeout(resizeTimeout);
}
resizeTimeout=setTimeout(function(){
if($this.css("position")==="absolute"){
topMargin="-"+Math.round($this.outerHeight()/2)+"px";
leftMargin="-"+Math.round($this.outerWidth()/2)+"px";
$this.css({"margin-left":leftMargin,"margin-top":topMargin});
}else{
topPos=Math.floor((parent.height()-$this.outerHeight())/2);
$this.css("top",topPos);
}
},150);
});
});
}
});
})(jQuery);
</script>下面是完整的页面标记看起来像这样：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Center div with jQuery demo</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
#myDiv{
width:70%;
height:auto;
background:#ccc;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<div id="myDiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
<script>
(function($){
$(document).ready(function(){
$.fn.center=function(){
return this.each(function(){
var $this=$(this),
parent=$this.parent(),
topPos,
topMargin,
leftMargin,
resizeTimeout;
if(parent.is("body:not(.root-height-set)")){
$("html,body").css("height","100%").addClass("root-height-set");
}
if($this.css("position")==="absolute" || $this.css("position")==="fixed"){
topPos="50%";
topMargin="-"+Math.round($this.outerHeight()/2)+"px";
leftMargin="-"+Math.round($this.outerWidth()/2)+"px";
$this.css({"left":"50%","margin-left":leftMargin});
}else{
topPos=Math.floor((parent.height()-$this.outerHeight())/2);
topMargin="auto";
$this.css({"position":"relative","margin-left":"auto","margin-right":"auto"});
}
$this.css({"top":topPos,"margin-top":topMargin});
$(window).resize(function(){
if(resizeTimeout){
clearTimeout(resizeTimeout);
}
resizeTimeout=setTimeout(function(){
if($this.css("position")==="absolute"){
topMargin="-"+Math.round($this.outerHeight()/2)+"px";
leftMargin="-"+Math.round($this.outerWidth()/2)+"px";
$this.css({"margin-left":leftMargin,"margin-top":topMargin});
}else{
topPos=Math.floor((parent.height()-$this.outerHeight())/2);
$this.css("top",topPos);
}
},150);
});
});
}
$("#myDiv").center();
});
})(jQuery);
</script>
</body>
</html>为了使脚本更容易使用和实施上的任何页面或项目，你可以将。js文件中的函数（如center.js）和它，而不是在每一页上有jQuery代码包括：
<script src="center.js"></script><script>
(function($){ $(document).ready(function(){ $("#myDiv").center();
});
})(jQuery);</script>PREVIOUS:
NEXT:
相关插件-布局
讨论这个项目（4）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
张小鱼 0
2015/2/28 10:14:17
-
hao xiang xi dou bu yong xia zai le. wei shen mo bu neng da zhong wen
YG。0
2016/1/22 16:01:28
我楞是给你看完了
回忆0
2017/8/15 16:58:01
好像现在都不用下载了，为什么不能打中文
你换个输入法试试，或者换个浏览器访问！
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
