定位的盒子居中对齐

原创于 2019-02-17 17:43:00 发布 · 627 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#盒子居中 #DIV

前端专栏收录该内容

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:-自己高度的一半；
}