如何实现一个div垂直水平居中？

月光撩人.

于 2024-03-21 14:40:47 发布

阅读量709

点赞数 27

文章标签： html 前端

本文链接：https://blog.csdn.net/zhaowenxvan_1023/article/details/136906967

版权

第一种：定位

第一种思路：父元素relative，子元素absolute，left为50%，top为50%，再给子div设置距左和距上是自身的一半：transform:translate(-50%,-50%)。

代码实现：

<!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>
        .big-box {
            width: 400px;
            height: 400px;
            background-color: crimson;
            position: relative;
        }

        .small-box {
            width: 150px;
            height: 150px;
            background-color: aqua;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="big-box">
        <div class="small-box"></div>
    </div>
</body>

</html>

第二种思路：父元素relative，子元素absolute，left为50%，top为50%，再给子div设置距左和距上是负自身的一半即：margin-left:负自身宽度/2，margin-top:负自身高度/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>
    <style>
        .big-box {
            width: 400px;
            height: 400px;
            background-color: crimson;
            position: relative;
        }

        .small-box {
            width: 150px;
            height: 150px;
            background-color: aqua;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -75px;
            margin-top: -75px;
        }
    </style>
</head>

<body>
    <div class="big-box">
        <div class="small-box"></div>
    </div>
</body>

</html>

第三种思路：父元素relative，子元素absolute，并且left，right，top，bottom设置为0，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>
        .big-box {
            width: 400px;
            height: 400px;
            background-color: crimson;
            position: relative;
        }

        .small-box {
            width: 150px;
            height: 150px;
            background-color: aqua;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="big-box">
        <div class="small-box"></div>
    </div>
</body>

</html>

第四种：flex布局

思路：给父元素设置display:flex，并且再给父元素设置水平居中：justify-content:center，垂直居中：align-items:center。这样，子元素就垂直水平居中啦！

代码实现：

<!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>
        .big-box {
            width: 400px;
            height: 400px;
            background-color: crimson;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .small-box {
            width: 150px;
            height: 150px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="big-box">
        <div class="small-box"></div>
    </div>
</body>

</html>

第五种：网格布局（grid）

思路：给父元素设置display:grid，并且再给父元素设置水平居中：justify-content:center，垂直居中：align-items:center。这样，子元素就垂直水平居中啦！(与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>
    <style>
        .big-box {
            width: 400px;
            height: 400px;
            background-color: crimson;
            display: grid;
            align-items: center;
            justify-content: center;
        }

        .small-box {
            width: 150px;
            height: 150px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="big-box">
        <div class="small-box"></div>
    </div>
</body>

</html>

统一效果：