绝对定位的盒子如何垂直居中

最新推荐文章于 2024-02-02 00:20:02 发布

原创最新推荐文章于 2024-02-02 00:20:02 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #定位 #前端

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何利用CSS的绝对定位和垂直居中技巧，避免将a标签转换为块级元素，直接设置宽度和高度实现a链接的样式控制。重点讲解了如何通过`position:absolute`配合`top:50%`和`margin-top`来实现居中效果。

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

a链接可以设置宽度和高度，做成一个盒子，不需要专门设置一个 div 大盒子专门去盛放 a 里面的内容，如果是a链接设置了定位可以直接指定宽度和高度，不需要转换成块元素

绝对定位的盒子垂直居中：

        position: absolute;
        /* 加了绝对定位的盒子，垂直居中 */
        top: 50%;
        left: 0;
        margin-top: -10px;
        /* 加了绝对定位的盒子可以直接设置宽度和高度，不需要把a标签转换成块元素 */
        width: 28px;
        height: 42px;

position:absolute;

/*边偏移*/top：50%；

left:0;

margin-top:-heightpx;

靠左垂直居中，top值50%，left值0px，margin-top值是盒子高度的一半负值，注意一定是负值，一定是负值