css控制div水平居中

<pre class="brush:css;">    .className{
	margin:0 auto;
	width:200px;
	height:200px;
}

```
<h1>
	css控制div水平、垂直居中</h1>
<p>
	控制div的水平和水质居中，比较棘手，你需要预先知道div的宽度和高度。</p>
<p>
	首先设定绝对定位，这样可以把元素从周围分离出来，相对于window定位。然后设定左上居中50%定位，这样就可以中间了。最后设定div的左上的定位为负值，分别为宽高的一半。</p>
<pre class="brush:css;">    .className{
	width:300px;
	height:200px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-100px 0 0 -150px;
}

```
<h1>
	css+Jquery控制div水平、垂直居中</h1>
<p>
	使用div+css只能是先定了宽高的div水平和垂直居中。看看jquery能做什么。</p>
<pre class="brush:jscript;">    $(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();

```
<p>
	其实模仿的上一种办法，只是在浏览器窗口改变时，动态计算div的高度和宽度。偷巧的完成了div的宽度和高度计算。</p>
<p>
	缺点是必须JavaScript支持。但，其效果非常好，可以用在华丽的用户界面上。</p>
<p>
	原文：http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/</p>