您的位置：首页 > Web前端 > CSS

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

2013-11-17 22:43 423 查看
http://www.css3-html5.com/Div-css-Layout/20110408672.html

创建页面布局的时候，会遇到只是用纯粹的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
//Toinitiallyrunthefunction:
12
$(window).resize();
其实模仿的上一种办法，只是在浏览器窗口改变时，动态计算div的高度和宽度。偷巧的完成了div的宽度和高度计算。

缺点是必须JavaScript支持。但，其效果非常好，可以用在华丽的用户界面上。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航