【html+css+js】实例自习笔记–前端基础知识–绝对定位的盒子水平居中

本文链接：https://blog.youkuaiyun.com/qq_41562897/article/details/135595199

本文介绍了如何在HTML和CSS中使用绝对定位使盒子水平和垂直居中，通过调整`left`和`top`属性以及相应的`margin`来实现，提供了两个示例代码片段。

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

【html+css+js】实例自习笔记–前端基础知识–绝对定位的盒子水平居中

【CSS面试题】绝对定位的盒子水平居中

问题：

代码如图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: pink;
        /* 加了绝对定位的盒子不能通过margin：0 auto; 进行水平居中 */
        margin: 0 auto;
    }
</style>

<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

解决办法

1.水平居中

left:50%:让盒子的左侧移动到父级盒子的水平中心位置（即走父容器的一半）
margin-left:-(盒子本身宽度的一半)：让盒子向左移动盒子宽度的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: pink;
        /* 加了绝对定位的盒子不能通过margin：0 auto; 进行水平居中 */
        /* margin: 0 auto; */
        left: 50%;
        margin-left: -100px;
       }
</style>

<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

2.垂直居中

top:50%:让盒子的上边移动到父级盒子的垂直中心位置（即走父容器的一半）
margin-top:-(盒子本身高度的一半)：让盒子向上移动盒子高度的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: pink;
        /* 加了绝对定位的盒子不能通过margin：0 auto; 进行水平居中 */
        /* margin: 0 auto; */
        /* 水平居中 */
        left: 50%;
        margin-left: -100px;
        /* 垂直居中 */
        top: 50%;
        margin-top: -100px;
       }
</style>

<body>
    <div class="box"></div>
</body>
</html>