56、如何快速让⼀个盒⼦⽔平垂直居中

在网页开发中,有多种方式能让一个盒子实现水平垂直居中。下面为你介绍几种常见且快速的方法。

1. 使用 Flexbox 布局

Flexbox 是一种非常便捷的布局模型,能够轻松实现元素的水平和垂直居中。

html

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .parent {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px;
            height: 300px;
            background-color: lightblue;
        }

        .child {
            width: 50px;
            height: 50px;
            background-color: lightcoral;
        }
    </style>
    <title>Flexbox 居中</title>
</head>

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

</html>

在上述代码中,通过将父元素的 display 属性设置为 flex,使其成为一个弹性容器。justify-content: center 实现了子元素在水平方向上的居中,align-items: center 实现了子元素在垂直方向上的居中。

2. 使用绝对定位和负边距

此方法利用绝对定位和负边距来达成元素的水平垂直居中。

html

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .parent {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: lightblue;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50px;
            height: 50px;
            margin-top: -25px;
            margin-left: -25px;
            background-color: lightcoral;
        }
    </style>
    <title>绝对定位和负边距居中</title>
</head>

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

</html>

这里,父元素的 position 属性被设置为 relative,作为子元素绝对定位的参考。子元素通过 top: 50%left: 50% 把左上角定位到父元素的中心,再利用负边距(值为自身宽度和高度的一半)将其向上和向左移动,从而实现水平垂直居中。不过,这种方法要求子元素的宽度和高度是固定的。

3. 使用绝对定位和 transform 属性

借助绝对定位和 transform 属性也能实现元素的水平垂直居中。

transform: translate(-50%, -50%); 意味着元素会在 X 轴和 Y 轴上分别向左和向上移动自身宽度和高度的 50%。

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .parent {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: lightblue;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: lightcoral;
        }
    </style>
    <title>绝对定位和 transform 居中</title>
</head>

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

</html>

父元素的 position 属性设为 relative,子元素通过 top: 50%left: 50% 把左上角定位到父元素的中心,transform: translate(-50%, -50%) 则将子元素向上和向左移动自身宽度和高度的一半,实现水平垂直居中。这种方法不要求子元素的宽度和高度固定。

4. 使用 Grid 布局

Grid 布局是一种强大的二维布局模型,也能轻松实现元素的水平垂直居中。

html

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .parent {
            display: grid;
            place-items: center;
            width: 300px;
            height: 300px;
            background-color: lightblue;
        }

        .child {
            width: 50px;
            height: 50px;
            background-color: lightcoral;
        }
    </style>
    <title>Grid 居中</title>
</head>

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

</html>

通过将父元素的 display 属性设置为 grid,使其成为一个网格容器。place-items: center 同时实现了子元素在水平和垂直方向上的居中。

相关推荐
拾光拾趣录22 分钟前
从“祖传”构造函数到 `class`
前端·javascript
wmm_会飞的@鱼27 分钟前
FlexSim-汽车零部件仓库布局优化与仿真
服务器·前端·网络·数据库·数学建模·汽车
yvvvy29 分钟前
从“按钮都不会点”到“能撸大厂 UI”:我用 react-vant 踢开组件库的大门!
前端·javascript
安然dn30 分钟前
Cropper.js:JS图像裁剪库
前端·javascript
Serendipity26131 分钟前
微服务架构
前端·微服务
Hilaku1 小时前
深入background-image:你可能不知道的几个性能优化与高级技巧
前端·css
南岸月明1 小时前
副业自媒体1年终于明白:为什么会表达的人,能量越来越强,更能赚到钱?
前端
Danny_FD1 小时前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip1 小时前
闭包实现一个简单Vue3的状态管理
前端·javascript
斐济岛上有一只斐济1 小时前
后端程序员的CSS复习
前端