margin：auto只能实现水平居中，不能实现垂直居中？实现盒子水平垂直居中的几种方法

最新推荐文章于 2024-07-30 16:49:30 发布

Now？！

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量1.1k

点赞数 15

文章标签：前端 javascript html css

本文链接：https://blog.csdn.net/weixin_66130560/article/details/136928937

版权

第一个问题

margin：auto只能实现水平居中，不能实现垂直居中？

问题代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fu{
            width: 200px;
            height: 200px;
            background-color: #ffb6b6;
        }
        .zi{
            width: 80px;
            height: 30px;
            margin:auto;
            background-color: #ffdda7;


        }
    </style>
</head>
<body>
    <div class="fu">
        <div class="zi">我垂直水平居中？</div>
    </div>
</body>
</html>

问题原因

margin：auto是具有强烈计算意味的关键字，用来计算元素对应方向上应该获取的剩余空间大小。

在块级元素中，margin：auto 和margin： 0 auto效果一样。

块级元素即使设置了宽度，也会独占一行，在水平方向自动扩充。

在水平方向，margin会填充元素中除border，width，padding剩余空间，如果设置了auto，就会平分剩余空间，实现水平居中。

但在垂直方向上，块级元素不会自动扩展，其他外部盒子没有自动填满父元素，也就没有剩余空间，所以不能实现垂直居中。

解决办法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fu{
            width: 200px;
            height: 200px;
            background-color: #ffb6b6;
            position: relative;
        }
        .zi{
            width: 80px;
            height: 30px;
            background-color: #ffdda7;
            margin:auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;

        }
    </style>
</head>
<body>
    <div class="fu">
        <div class="zi">我垂直水平居中</div>
    </div>
</body>
</html>

注意点1：上诉结论要求父、子盒子要有固定宽高；如果子盒子没有固定宽高，则效果如下：

注意点2：在行内元素中：margin：auto既不能实现水平居中也不能实现垂直居中，因为行内元素水平垂直方向上默认没有剩余空间。

第二个问题

实现盒子水平垂直居中的几种方法

五种解决办法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fu{
            width: 200px;
            height: 200px;
            background-color: #ffb6b6;
            /* 方法三、四、五的前提 */
            position: relative;

            /* 方法一：即适用于子盒子宽高已知，也适用于子盒子宽高未设置的情况 */
            display: flex;
            justify-content: center;
            align-items: center;

            /* 方法二：即适用于子盒子宽高已知，也适用于子盒子宽高未设置的情况 */
            display: grid;
            justify-content: center;
            align-items: center;
        }
        .zi{
            width: 80px;
            height: 30px;
            margin:auto;
            background-color: #ffdda7;

            /* 方法三：适用于 子盒子宽高固定（已知）的情况 */
            margin:auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;

            /* 方法四：即适用于子盒子宽高已知，也适用于子盒子宽高未设置的情况 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);

            /* 方法五：适用于子盒子宽高已知的情况，margin的值根据子盒子的宽高的负一半来设置 */
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -15px -40px;
            
        }
    </style>
</head>
<body>
    <div class="fu">
        <div class="zi">我垂直水平居中</div>
    </div>
</body>
</html>

如果对你有帮助，希望能得到你的点赞或收藏或关注，这是对我最好的鼓励；

如你有问题或疑惑，欢迎在评论区写下，必将努力解答；

如本文有误区，希望你不吝赐教，让我们共勉！

Now？！

关注

15
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
margin：auto只能实现水平居中，不能实现垂直居中？实现盒子水平垂直居中的几种方法

在水平方向，margin会填充元素中除border，width，padding剩余空间，如果设置了auto，就会平分剩余空间，实现水平居中。但在垂直方向上，块级元素不会自动扩展，其他外部盒子没有自动填满父元素，也就没有剩余空间，所以不能实现垂直居中。：margin：auto既不能实现水平居中也不能实现垂直居中，因为行内元素水平垂直方向上默认没有剩余空间。第一个问题：margin：auto只能实现水平居中，不能实现垂直居中？，margin：auto 和margin： 0 auto效果一样。
复制链接

扫一扫