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支持。但，其效果很是好，能夠用在華麗的用戶界面上。

 不會到會，只是一個過程！