当前位置:
首页 > 网站相关 > div+css > css 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支持。但,其效果非常好,可以用在华丽的用户界面上。