css div水平垂直居中

最新推荐文章于 2025-08-16 17:02:07 发布

Mathilda91

最新推荐文章于 2025-08-16 17:02:07 发布

阅读量74

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/1468096/blog/308259

本文介绍了如何使用CSS实现div元素的水平和垂直居中。通过设置margin属性和使用绝对定位，文章详细解释了其实现原理及技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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