一个好用的让DIV水平垂直居中的方法

最新推荐文章于 2025-03-26 15:10:30 发布

程序员小周

最新推荐文章于 2025-03-26 15:10:30 发布

阅读量376

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/qq_18663357/article/details/52262614

版权

CSS 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了使用CSS实现元素在页面中水平垂直居中的方法，包括已知宽度和高度的情况及未知宽度和高度的情况。利用transform属性可以更灵活地进行居中布局。

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

div{
    width : 300px;
    height : 300px;
    border : 1px solid red;
    position : absolute;
    top : 50%;
    left : 50%;
    margin-top : -150px;
    margin-left : -150px;  
}

小解：
将DIV的定位设置为absolute之后，top:50%是指DIV的上边框距离外框顶部的距离是50%，但是垂直居中要保证DIV的中心距离外框顶部距离是50%，所以margin-top:-150px保证了上面的效果

也可以这样：

未知宽高：
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);

已知宽高：
width:200px;height:200px;position:absolute;left:50%;top:50%;transform:translate(-100px,-100px);

TIPS：
负边距补充：
当 margin-top 、 margin-left 为负值的时候，会把元素上移、左移，同时文档流中的位置也发生相应变化,这点与 position:relative 的元素设置top、left后元素还占据原来位置不同
当 margin-bottom 、 margin-right 设为负值的时候，元素本身没有位置变化，后面的元素会下移、右移