实现元素水平垂直居中的方法

于 2025-02-23 20:58:22 发布
阅读量315 收藏 6
点赞数 5
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_73483647/article/details/145815573
版权

在前端开发中，实现元素水平垂直居中是一个常见的需求，以下将从不同的布局方式出发，介绍多种实现元素水平垂直居中的方法：

行内元素或行内块级元素

1. 使用 text-align: center 和 line-height
  • 原理：text-align: center 可以使行内元素在其父元素中水平居中，而 line-height 设置为与父元素高度相等时，能使行内元素垂直居中。
  • 示例代码

html

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

<head>
    <meta charset="UTF-8">
    <style>
        .parent {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>

<body>
    <div class="parent">
        <span>居中的文本</span>
    </div>
</body>

</html>
2. 使用 flexbox
  • 原理：通过将父元素设置为 display: flex 或 display: inline-flex，并结合 justify-content: center 和 align-items: center 可以分别实现子元素的水平和垂直居中。
  • 示例代码

html

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

<head>
    <meta charset="UTF-8">
    <style>
        .parent {
            width: 200px;
            height: 200px;
            background-color: lightgreen;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="parent">
        <span>居中的文本</span>
    </div>
</body>

</html>
3. 使用 grid
  • 原理：将父元素设置为 display: grid 或 display: inline-grid，然后使用 place-items: center 可以同时实现子元素的水平和垂直居中。
  • 示例代码

html

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

<head>
    <meta charset="UTF-8">
    <style>
        .parent {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            display: grid;
            place-items: center;
        }
    </style>
</head>

<body>
    <div class="parent">
        <span>居中的文本</span>
    </div>
</body>

</html>

块级元素

1. 使用 flexbox
  • 原理：同样是将父元素设置为 display: flex 或 display: inline-flex，并结合 justify-content: center 和 align-items: center 实现子元素的水平和垂直居中。
  • 示例代码

html

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

<head>
    <meta charset="UTF-8">
    <style>
        .parent {
            width: 200px;
            height: 200px;
            background-color: lightyellow;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .child {
            width: 50px;
            height: 50px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

</html>
2. 使用 grid
  • 原理：父元素设置为 display: grid 或 display: inline-grid，使用 place-items: center 实现子元素的水平和垂直居中。
  • 示例代码

html

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

<head>
    <meta charset="UTF-8">
    <style>
        .parent {
            width: 200px;
            height: 200px;
            background-color: lightpink;
            display: grid;
            place-items: center;
        }

        .child {
            width: 50px;
            height: 50px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

</html>
3. 使用绝对定位和负边距（已知子元素宽高）
  • 原理：将子元素设置为绝对定位，通过 top: 50% 和 left: 50% 将子元素的左上角移动到父元素的中心位置，再使用负边距将子元素向上和向左移动自身宽度和高度的一半，从而实现水平垂直居中。
  • 示例代码

html

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

<head>
    <meta charset="UTF-8">
    <style>
        .parent {
            width: 200px;
            height: 200px;
            background-color: lightseagreen;
            position: relative;
        }

        .child {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -25px;
            margin-left: -25px;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

</html>
4. 使用绝对定位和 transform（未知子元素宽高）
  • 原理：同样将子元素设置为绝对定位，通过 top: 50% 和 left: 50% 将子元素的左上角移动到父元素的中心位置，然后使用 transform: translate(-50%, -50%) 将子元素向上和向左移动自身宽度和高度的一半，实现水平垂直居中。
  • 示例代码

html

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

<head>
    <meta charset="UTF-8">
    <style>
        .parent {
            width: 200px;
            height: 200px;
            background-color: lightslategray;
            position: relative;
        }

        .child {
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child">未知宽高的元素</div>
    </div>
</body>

</html>

绝对定位元素

使用 top、left、right、bottom 和 margin: auto
  • 原理：将绝对定位元素的 top、left、right、bottom 都设置为 0，然后将 margin 设置为 auto，可以使元素在父元素中水平垂直居中。
  • 示例代码

html

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

<head>
    <meta charset="UTF-8">
    <style>
        .parent {
            width: 200px;
            height: 200px;
            background-color: lightgoldenrodyellow;
            position: relative;
        }

        .child {
            width: 50px;
            height: 50px;
            background-color: green;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

</html>
徐某@
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值