日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

小div在大div中水平垂直居中（兩個div都固定寬高）

作者：sleepwalker_1992 更新時間： 2022-02-16 編程語言

方法一：兒子絕對定位或相對定位，這樣兒子脫離標準流，父親有固定寬高，用兒子的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;居中

原文鏈接：https://blog.csdn.net/sleepwalker_1992/article/details/80656170

欄目分類
最近更新