css绝对定位之对齐居中版心内容

﹏ヽ暗。殇╰゛Y 2023-01-10 14:58 136阅读 0赞

**假如我想让一个盒子固定在我中部版心位置，应该怎么办呢？**  
方法如下：  
没有定位之前，他们是普通的两个盒子，html代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="fixed.css">
    </head>
    <body>
        <div class="nav"></div>
        <div class="box"></div>
    </body>
    </html>

css（fixed.css）代码如下：

.box {
        
        width: 800px;
        height: 800px;
        background-color: pink;
        margin: 0 auto;
    }
    .nav {
        
        width: 150px;
        height: 300px;
        background-color: powderblue;
    }

此时的运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]

这不是我们想要的，我们想要小盒子靠在大盒子右部。应该怎么做呢？  
**只要改ｃｓｓ就可以啦。。**  
ｃｓｓ代码如下：

.box {
        
        width: 800px;
        height: 800px;
        background-color: pink;
        margin: 0 auto;
    }
    .nav {
        
        width: 150px;
        height: 300px;
        background-color: powderblue;
        position: fixed;
        left: 50%;
        margin-left: 400px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]  
运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]  
设置大盒子高度更大，滚动条滚动的时候小盒子位置也不会变哟，这是你想要的效果吗？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]  
方法总结：

1.  在小盒子上设置固定定位先：ｐｏｓｉｔｉｏｎ：ｆｉｘｅｄ
2.  让小盒子先占整个浏览器左边５０％的距离。ｌｅｆｔ：５０％
3.  再让小盒子距离大盒子左边距根据实际调整就好啦（大于等于大盒子宽度一半，则到大盒子右边啦）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221119/b28a2df028804c07ba060cf2a7836172.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221119/d11e55a2c73a4089934db446e4d440c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210125131819994.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210125131942539.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210125132049265.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt,size_16,color_FFFFFF,t_70