HTML元素垂直水平居中

最新推荐文章于 2024-04-12 11:37:26 发布

月色尚浅

最新推荐文章于 2024-04-12 11:37:26 发布

阅读量458

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/2301_79413719/article/details/132977849

版权

第一种方式：使用display布局


<!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 {
            width: 300px;
            height: 300px;
            border: 1px solid lightskyblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .small {
            width: 200px;
            height: 200px;
            border: 1px solid lightblue;
        }
    </style>
</head>

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

</html>

第二种方式：父position:relative，子position:absoulte

<!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 {
            width: 300px;
            height: 300px;
            border: 1px solid lightskyblue;
            position: relative;
        }

        .small {
            width: 200px;
            height: 200px;
            border: 1px solid lightblue;
            position:absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>

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

</html>

第三种方式：定位

<!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 {
            width: 300px;
            height: 300px;
            border: 1px solid lightskyblue;
            position: relative;
        }

        .small {
            width: 200px;
            height: 200px;
            border: 1px solid lightblue;
            position:absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
    </style>
</head>

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

</html>

第四种方式：定位+位移

transform: translate(-50%,-50%); 是一个 CSS transform 属性，用于将元素水平和垂直居中。

这个属性通常与 position: absolute; 或 position: fixed; 一起使用。它可以将元素从其初始位置平移，并按指定的百分比向左和向上移动。

具体来说，translate(-50%,-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 {
            width: 300px;
            height: 300px;
            border: 1px solid lightskyblue;
            position: relative;
        }

        .small {
            width: 200px;
            height: 200px;
            border: 1px solid lightblue;
            position:absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>

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

</html>