第一句子网 - 唯美句子、句子迷、好句子大全
第一句子网 > css div水平垂直居中

css div水平垂直居中

时间:2022-09-01 16:31:06

相关推荐

css div水平垂直居中

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。