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

发布时间：2024年01月15日

【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>

在这里插入图片描述

文章来源:https://blog.csdn.net/qq_41562897/article/details/135595199
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章