定位的盒子居中对齐

知否技术

于 2019-02-17 17:43:00 发布

阅读量627

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：盒子居中 DIV

本文链接：https://blog.youkuaiyun.com/GUANYAQI1996/article/details/87544778

前端专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了如何使用CSS的绝对定位属性实现div元素的水平和垂直居中，包括设置left和top为50%，并调整margin来精确对齐。

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

注意：加了定位和浮动的DIV，margin：0 auto；失效

水平居中：
div{
    width:200px;
    height:100px;
    position:absolute;
    left:50%;
    margin-left:-自己宽度的一半；
}

垂直居中：
div{
    width:200px;
    height:100px;
    position:absolute;
    top:50%;
    margin-top:-自己高度的一半；
}