div的水平、垂直同居中（多种方法）

css div的水平、垂直同时居中

建立页面布局的时候，会遇到只是用纯粹的css控制div的垂直和水平居中。有不少种方法能够实现这种效果，这里列出我喜欢的。

首先是最基本的，

css控制div水平居中

建立一个div的水平居中很简单，只须要设定宽度和左右margin值自动。这种方法能够用在block级元素上（div、图片、h1等）。若是在inline元素上，必须使用display:block。

 

1.className{

2    margin:0 auto;

3    width:200px;

4    height:200px;

5}

css控制div水平、垂直居中

控制div的水平和水质居中，比较棘手，你须要预先知道div的宽度和高度。

首先设定绝对定位，这样能够把元素从周围分离出来，相对于window定位。而后设定左上居中50%定位，这样就能够中间了。最后设定div的左上的定位为负值，分别为宽高的一半。

 

1.className{

2    width:300px;

3    height:200px;

4    position:absolute;

5    left:50%;

6    top:50%;

7    margin:-100px 0 0 -150px;

8}

css+Jquery控制div水平、垂直居中

使用div+css只能是先定了宽高的div水平和垂直居中。看看jquery能作什么。

 

01$(window).resize(function(){

02  

03    $('.className').css({

04        position:'absolute',

05        left: ($(window).width() - $('.className').outerWidth())/2,

06        top: ($(window).height() - $('.className').outerHeight())/2

07    });

08  

09});

10  

11// To initially run the function:

12$(window).resize();

其实模仿的上一种办法，只是在浏览器窗口改变时，动态计算div的高度和宽度。偷巧的完成了div的宽度和高度计算。

缺点是必须JavaScript支持。但，其效果很是好，能够用在华丽的用户界面上。

 不会到会，只是一个过程！