服务热线：0755 - 23214858发布者：万邦 目录：外贸网站制作 阅读数：34043
创建页面布局的时候，会遇到只是用纯粹的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支持。但，其效果非常好，可以用在华丽的用户界面上。
上一篇: 2012年外贸网站建设的5个设计趋势
© 2008-
2024 by Wanbong Inc. All Rights Reserved. 粤ICP备14092676号