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

最新推荐文章于 2024-08-07 09:22:13 发布

I am the sun?

最新推荐文章于 2024-08-07 09:22:13 发布

阅读量454

点赞数 1

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

本文链接：https://blog.csdn.net/fighting_dream/article/details/113397662

版权

CSS 专栏收录该内容

21 篇文章 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;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

运行结果如下：
在这里插入图片描述
平时我们都是通过加上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>

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

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

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

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

代码解释：
在这里插入图片描述
运行结果如下：

好的，是不是有点偏右了呢，所以
第二步：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>

运行结果如下：
在这里插入图片描述
是不是实现水平居中啦。同理，接下来我想让绝对定位的盒子垂直也居中，是不是也很简单
第一步：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>