小div在大div中水平垂直居中(两个div都固定宽高)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sleepwalker_1992/article/details/80656170

方法一:儿子绝对定位或相对定位,这样儿子脱离标准流,父亲有固定宽高,用儿子的margin去挤父亲

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 600px;
            height: 600px;
            background-color: orangered;
        }
        .son{
            width: 300px;
            height: 200px;
            background-color: lawngreen;
            position: absolute;
            margin: 200px 150px;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

注意:如果儿子没有绝对定位或相对定位,且父亲没有border,那么儿子的margin实际上踹的是“流”,踹的是这“行”。如果用margin-top,父亲整体也掉下来了。如下:

方法二、如果给父亲加一个border,就可以父亲,儿子都不定位,用儿子的margin去挤父亲,实现儿子居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 600px;
            height: 600px;
            background-color: orangered;
            border: 1px solid white;
        }
        .son{
            width: 300px;
            height: 200px;
            background-color: lawngreen;
            margin: 200px 150px;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

方法三、子绝父相(儿子绝对定位,父亲相对定位),定位到大盒子的宽高一半的位置,再上下各margin负的自己宽高的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 600px;
            height: 600px;
            background-color: orangered;
            position: relative;
        }
        .son{
            width: 300px;
            height: 200px;
            background-color: lawngreen;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
        }
    </style>
</head>
<body>
       <div class="father">
           <div class="son"></div>
       </div>
</body>
</html>

方法四、子绝父相,定位到大盒子的宽高一半的位置,再用transform: translate向左向上移动自己宽高的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 600px;
            height: 600px;
            background-color: orangered;
            position: relative;
        }
        .son{
            width: 300px;
            height: 200px;
            background-color: lawngreen;
            position: absolute;
            top: 50%;
            left: 50%;
            /*用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了*/
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
       <div class="father">
           <div class="son"></div>
       </div>
</body>
</html>

方法五:绝对布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 600px;
            height: 600px;
            background-color: orangered;
            position: relative;
        }
        .son{
            width: 300px;
            height: 200px;
            background-color: lawngreen;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

方法六:使用table-cell

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 600px;
            height: 600px;
            background-color: orangered;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .son{
            width: 300px;
            height: 200px;
            background-color: lawngreen;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

display: table-cell;和 vertical-align: middle;两句实现垂直居中

text-align: center;和display: inline-block;两句实现水平居中

方法七、用margin: 0 auto;代替text-align: center;和display: inline-block;这两句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 600px;
            height: 600px;
            background-color: orangered;
            display: table-cell;
            vertical-align: middle;
        }
        .son{
            width: 300px;
            height: 200px;
            background-color: lawngreen;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

 

方法八:利用行高和文本居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 600px;
            height: 600px;
            background-color: orangered;
            text-align: center;
            line-height: 600px;
        }
        .son{
            width: 300px;
            height: 200px;
            background-color: lawngreen;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

方法九:使用弹性布局flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 600px;
            height: 600px;
            background-color: orangered;
            display: flex;
            /*水平居中*/
            justify-content: center;
            /*垂直居中*/
            align-items: center;
        }
        .son{
            width: 300px;
            height: 200px;
            background-color: lawngreen;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

上面几种方法结果都是如下所示:

补充知识点:

绝对定位:

一个绝对定位的元素,如果父辈元素中出现了也定位了的元素,那么将以父辈这个元素,为参考点。

工程上,“子绝父相”有意义,父亲没有脱标,儿子脱标在父亲的范围里面移动。

绝对定位之后,所有标准流的规则,都不适用了。所以margin:0 auto;失效。

display:inline和display:inline-block,会使margin:0 auto;失效。

固定宽度的盒子才能使用margin:0 auto;居中

展开阅读全文

没有更多推荐了,返回首页