css div水平垂直居中

div水平居中对齐
使用margin-left:auto;margin-right:auto; 
.style{margin-left:auto;margin-right:auto;}
缩写形式为:
.style{margin:0 auto;}

数字0 表示上下边距是0。可以按照需要设置成不同的值

div垂直居中对齐
position:absolute;left:50%;top:50%;margin-left:width/2;margin-top:height/2; 

div水平垂直对齐
.style
{
border:1px solid #999;   
position: absolute;           
width:380px;                   
height:200px;                   
left:50%;                            
top:50%; 
margin-left:-190px;
margin-top:-100px;
}
这里使用了绝对定位position:absolute, 使用left和top设置对象距离上和左为50%,但如果设置50%,实际上盒子是没有实现居中效果,所以又设置margin-left:- 190px;margin-top:-100px;,这里有个技巧是,margin-left的值是宽度一半,margin-top的值也是对象高度一 半,同时设置为负,这样就实现了水平和垂直居中。

你可能感兴趣的:(css div水平垂直居中)