css中让绝对定位的盒子水平或者垂直居中！！

深碍√TFBOYSˉ_ 2022-10-24 13:15 118阅读 0赞

**这是一个标准流盒子，代码如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>实现绝对定位的盒子水平居中</title>
        <style>
            .box {
        
                width: 200px;
                height: 200px;
                background-color: chartreuse;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]  
平时我们都是通过加上margin:auto来实型水平居中的，代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>实现绝对定位的盒子水平居中</title>
        <style>
            .box {
        
                width: 200px;
                height: 200px;
                background-color: chartreuse;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]  
**确实是实现了水平居中，但是这个盒子并不是绝对定位的盒子呀，它目前还是标准流盒子，我给它加个绝对定位试试效果，代码如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>实现绝对定位的盒子水平居中</title>
        <style>
            .box {
        
                width: 200px;
                height: 200px;
                background-color: chartreuse;
                margin: auto;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>

运行效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]  
你看，是不是又回来左边了呀，那我们可以考虑采用下面的这个方法。  
**第一步：先距离整个浏览器左边一半，即从右一半开始，你看代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>实现绝对定位的盒子水平居中</title>
        <style>
            .box {
        
                width: 200px;
                height: 200px;
                background-color: chartreuse;
                /* margin: auto; */
                position: absolute;
                left:50%;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>

代码解释：  
![在这里插入图片描述][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]  
好的，是不是有点偏右了呢，所以  
**第二步：margin-left:-100px；让盒子向左移动盒子自身宽的的一半，我这个盒子宽度是200px。向margin-left是距离左步距离，-100px，是向左移动100px。满足我们要求，代码如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>实现绝对定位的盒子水平居中</title>
        <style>
            .box {
        
                width: 200px;
                height: 200px;
                background-color: chartreuse;
                /* margin: auto; */
                position: absolute;
                left:50%;
                margin-left: -100px;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 5]  
是不是实现水平居中啦。同理，接下来我想让绝对定位的盒子垂直也居中，是不是也很简单  
**第一步：top:50%;**  
**第二部：margin-top:-100px;**  
代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>实现绝对定位的盒子水平居中</title>
        <style>
            .box {
        
                width: 200px;
                height: 200px;
                background-color: chartreuse;
                /* margin: auto; */
                position: absolute;
                left:50%;
                margin-left: -100px;
                top: 50%;
                margin-top: -100px;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>

运行效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 6]  
反正记住：  
**水平居中：  
left:50%;  
margin-left:负的盒子宽度的一半；  
垂直居中：  
top:50%;  
margin-top:负的盒子高度的一半；**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221024/1a9a408b11d04097870731abc818ccfc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221024/6741623cfa8a434283053aed3916fa8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]: /images/20221024/bd11eca24ff94a5bb28e993b7504e798.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]: /images/20221024/8956373749924d22bcb5c6cd04eb1024.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]: /images/20221024/dc3d76ce7b834d1b826a319770a0630f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 5]: /images/20221024/ccb79868ab174560b592d3674bd6f0e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 6]: /images/20221024/55337cd676bd43da8cfd9f9d221ac962.png