独角兽企业重金招聘Python工程师标准>>>
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的值也是对象高度一 半,同时设置为负,这样就实现了水平和垂直居中。