让盒子居中父盒子

HMGDCR598
161 阅读1分钟

方式一: 采用position定位的方式

1）知道子元素的宽高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body,div {
        padding: 0;
        margin: 0;
    }
    html,body {
        height: 100%;
    }
    
    .box {
        position: relative;
        height: 100%;
        background-color: yellow;
    }
    .padding_box {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -100px;
        width: 200px;
        height: 200px;
        background: pink;
    }
    
</style>
<body>
    <div class="box">
        <div class="padding_box">
        </div>
    </div>
    
</body>
</html>

注意：

  • 父元素采用相对定位relative,只需要给高度就行，宽度默认是100%；子元素采用绝对定位absolute,此方式是常用的。
  • 父元素采用绝对定位absolute，宽高都是需要设置的，因为已经脱离了文档流，此方法不常用。

以上的方法，是知道子元素的宽高的情况下，才起作用的。所以，在得知子元素的宽高的情况下，子元素也可以采用如下方法也可以得到同样的效果：

.padding_box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 200px;
        height: 200px;
        margin: auto;
        background: pink;
    }

2）不知道子元素的宽高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body,div {
        padding: 0;
        margin: 0;
    }
    html,body {
        height: 100%;
    }
    
    .box {
        position: relative;
        height: 100%;
        background-color: yellow;
    }
    .padding_box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: pink;
    }

</style>
<body>
    <div class="box">
        <div class="padding_box">
            子元素居中
        </div>
    </div>
    
</body>
</html>

*注意：

  • transform不兼容

方式二: 采用display: flex;弹性布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body,div {
        padding: 0;
        margin: 0;
    }
    html,body {
        height: 100%;
    }
    
    .box {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background-color: yellow;
    }
    .padding_box {
        background: pink;
    }

</style>
<body>
    <div class="box">
        <div class="padding_box">
            子元素居中
        </div>
    </div>
    
</body>
</html>

注意：

  • flex也是有兼容性问题

方式三: js的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body,div {
        padding: 0;
        margin: 0;
    }
    html,body {
       
        height: 100%;
    }
    body {
        /* position: relative; */
    }
    .box {
        position: relative;
        height: 100%;
        background-color: yellow;
    }
    .padding_box {
        background: pink;
    }

</style>
<body>
    <div class="box" >
        <div class="padding_box" id="myBox">
            子元素居中
        </div>
    </div>

    <script>
        var HTML = document.documentElement;
        var winW = HTML.clientWidth;
        var winH = HTML.clientHeight;
        // 这一行代码必须在获取盒子宽度的前面，否则得到的是默认的宽度，即默认100%的宽
        myBox.style.position = 'absolute';
        var boxW = myBox.offsetWidth;
        var boxH = myBox.offsetHeight;
        myBox.style.left = (winW - boxW) / 2 + 'px'
        myBox.style.top = (winH - boxH) / 2 + 'px'
    </script>
</body>
</html>

注意：

  • 也是采用定位的方式

方式四：table-cell

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body,div {
        padding: 0;
        margin: 0;
    }
    html,body {
       
        height: 100%;
    }
    body {
    }
    .box {
        height: 100%;
        background-color: yellow;
    }
    .padding_box {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        width: 200px;
        height: 200px;
        background: pink;
    }

</style>
<body>
    <div class="box" >
        <div class="padding_box" id="myBox">
            子元素居中
        </div>
    </div>

    <script>
      
    </script>
</body>
</html>

注意：

  • 必须给指定宽高

avatar
文章
阅读
粉丝