容器垂直居中的方式

最新推荐文章于 2023-09-01 14:43:28 发布

原创最新推荐文章于 2023-09-01 14:43:28 发布 · 587 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

个人总结前端面试考点专栏收录该内容

7 篇文章

订阅专栏

本文介绍了七种不同的方法来实现HTML/CSS中的容器垂直居中效果，包括绝对定位结合负外边距、transform:translateY、margin自动、padding、flex布局、flex改变主轴方向以及display:table-cell。每种方法都有其适用场景和特点，如需在网页设计中实现元素的垂直居中，这些技巧非常实用。

容器垂直居中的方式

方式一：绝对定位+负外边距（需要知道居中容器的高度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: aqua;
            position: relative;
        }
        .child{
            width: 150px;
            height: 100px;
            background-color: greenyellow;
            position: absolute;
            top: 50%;
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child"></div>
    </div>
</body>
</html>

方式二：绝对定位+transform: translateY(-50%);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: aqua;
            position: relative;
        }
        .child{
            font-size: 100px;
            background-color: greenyellow;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child">WM</div>
    </div>
</body>
</html>

方式三：绝对定位+margin:auto 0;

需要居中容器的top和bottom值相等，如果居中容器没有设置高度，则高度会铺满父容器剩余高度空间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: aqua;
            position: relative;
        }
        .child{
            font-size: 100px;
            background-color: greenyellow;
            position: absolute;
            top: 11px;
            bottom: 11px;
            margin: auto 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child">WM</div>
    </div>
</body>
</html>

方式四：padding

父容器高度不用设置，需知道居中容器高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            background-color: aqua;
            padding: 100px 0;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child">WM</div>
    </div>
</body>
</html>

方式五：flex布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: aqua;
            display: flex;
            align-items: center;
        }

        .child {
            font-size: 100px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="child">WM</div>
    </div>
</body>

</html>

方式六：flex布局改变主轴方向

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: aqua;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .child {
            font-size: 100px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="child">WM</div>
    </div>
</body>

</html>

方式七：使用display: table-cell;vertical-align: middle;对容器内文本垂直居中

需要给父容器设置display: table;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: aqua;
            display: table;
        }

        .child {
            font-size: 50px;
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="child">WM</div>
    </div>
</body>

</html>

方式八：设置line-height等于容器高度使容器内文本垂直居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 100px;
            background-color: aqua;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div class="box">
        上下上下
    </div>
</body>

</html>