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

who am I？ 6666

于 2021-06-20 18:21:26 发布

阅读量246

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css html 定位前端

本文链接：https://blog.youkuaiyun.com/machine_vision123/article/details/118072946

前端专栏收录该内容

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值是盒子高度的一半负值，注意一定是负值，一定是负值