百度360必应搜狗淘宝本站头条
linux取消挂载yum卸载下横线怎么打mysql 外网访问权限php打乱数组顺序
当前位置：网站首页 > 编程文章 > 正文

CSS-如何让一个元素水平垂直居中?

qiyuwang 2024-10-15 14:44 11 浏览 0 评论

前言

老板的手机收到一个红包，为什么红包没居中？


如何让一个子元素在父容器里水平垂直居中？这个问题必考，在实战开发中，也应用得非常多。

你也许能顺手写出好几种实现方法。但大部分人的写法不够规范，经不起千锤百炼。换句话说：这些人也就面试的时候夸夸其谈，但真的上战场的时候，他们不敢这么写，也不知道怎么写最靠谱。

这篇文章中，我们来列出几种常见的写法，最终你会明白，哪种写法是最优雅的。

当然，我还会拿出实际应用中的真实场景来举例，让你感受一下标准垂直居中的魅力。

如何让一个行内元素（文字、图片等）水平垂直居中

行内元素的居中问题比较简单。

行内元素水平居中

给父容器设置：

    text-align: center;

行内元素垂直居中

让文字的行高 等于 盒子的高度，可以让单行文本垂直居中。比如：

    .father {
        height: 20px;
        line-height: 20px;
    }

如何让一个块级元素水平垂直居中

这一段是本文的核心。如何让一个块级的子元素在父容器里水平垂直居中？有好几种写法。我们一起来看看。

margin: auto 的问题

在 CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父容器应用 text-align: center；如果它是一个块级元素，就对它自身应用 margin: auto或者 margin: 0 auto。

在这里，margin: auto相当于margin: auto auto auto auto。margin: 0 auto相当于margin: 0 auto 0 auto，四个值分别对应上右下左。其计算值取决于剩余空间。

但是，如果要对一个元素垂直居中，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>
        .father{
            height: 500px;
            background: pink;
        }
        .son {
            width: 300px;
            height: 200px;
            background: red;

            margin: auto;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script></script>
</body>
</html>

上面的代码中，父元素和子元素都是定宽高的，即便在这种情况下，我给子元素设置 margin: auto，子元素依然没有垂直居中。

那还有没有比较好的通用的做法呢？

方式一：绝对定位 + margin（需要指定子元素的宽高，不推荐）

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .father{
            position: relative;
            min-height: 500px;
            background: pink;
        }
        .son {
            position: absolute;
            width: 200px;
            height: 100px;
            background: red;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">子元素的内容</div>
    </div>
    <script></script>
</body>
</html>

代码解释：我们先让子元素的左上角居中，然后向上移动宽度的一半(50px)，就达到了垂直居中的效果；水平居中的原理类似。

不足之处：要求指定子元素的宽高，才能写出 margin-top 和 margin-left 的属性值。

但是，在通常情况下，对那些需要居中的元素来说，其宽高往往是由其内容来决定的，不建议固定宽高。

方式二：绝对定位 + translate（无需指定子元素的宽高，推荐）

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .father{
            position: relative;
            min-height: 500px;
            background: pink;
        }
        .son {
            position: absolute;
            background: red;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">子元素的内容</div>
    </div>
    <script></script>
</body>
</html>

这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。因为 translate() 函数中使用百分比值时，是以这个元素自身的宽度和高度为基准进行换算和移动的（动态计算宽高）。

方式3：flex 布局（待改进）

将父容器设置为 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>
        * {
            margin: 0;
            padding: 0;
        }
        .father{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: pink;
        }
        .son {
            background: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">子元素的内容</div>
    </div>
    <script></script>
</body>
</html>

上面这种写法，不足之处在于：给父容器设置属性justify-content: center和align-items: center之后，导致父容器里的所有子元素们都垂直居中了（如果父容器里有多个子元素的话）。可我明明想让指定的某个子元素居中，要怎么改进呢？

方式4： flex 布局 + margin: auto（推荐）

我们只需写两行声明即可：先给父容器设置 display: flex，再给指定的子元素设置我们再熟悉不过的 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>
        * {
            margin: 0;
            padding: 0;
        }
        .father{
            display: flex;
            min-height: 100vh;
            background: pink;
        }
        .son {
            margin: auto;
            background: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">子元素的内容，想水平垂直居中</div>
        <div class="son2">这个元素不想水平垂直居中</div>
    </div>
    <script></script>
</body>
</html>

请注意，当我们给父容器使用 Flex 布局 时，子元素的margin: auto不仅能让其在水平方向上居中，垂直方向上也是居中的。

相关推荐

别再乱找了!这才是 Alist 本地安装挂载的正确打开方式

一、探秘Alist的神奇世界在这个数据爆炸的时代，我们的生活里充斥着各种各样的网盘服务，百度网盘、阿里云盘、腾讯微云等等，它们成了我们存储资料的得力助手。但随着网盘数量的增多，管理这些分散在不同平...

如何将数据从旧iPhone传输到新iPhone 16?这五个方法你必须知道!

前不久，苹果发布了备受期待的iPhone16系列，新机型搭载了更强大的芯片、更流畅的操作体验，还有备受热议的全新摄像系统。无论你是冲着A18仿生芯片，还是更丰富的动态岛功能，相信很多果粉早已跃跃欲试...

大数据传输的定义与大数据传输解决方案的选择

当我们需要处理大量的数据时，我们就要把数据从一个地方移动到另一个地方。这个过程就叫做大数据传输。它通常需要用到高速的网络连接、分散的存储系统和数据传输协议，以保证数据的快速、可靠和安全的移动。常用的大...

【工具】在线传输文件工具（在线文件互传）

前言在线传输文件工具主要是用于在不同的设备之间，如手机、电脑、平板等快速便捷地传送文件。告别使用USB传统传输文件的方式。...

如何使用 CAN-FD 在 LPC5500 上传输数据

目录1引言2CAN-FD3示例演示1引言...

轻松同步:将照片从三星手机传输到iPad的简便方法

概括想要在新iPad上查看三星照片吗？但是，如果您不知道如何将照片从三星手机传输到iPad，则无法在iPad上查看图片。为此，本文分享了7个有用的方法，以便您可以使用它们在不同操作系统之...

常见又地道的网络缩写:美剧中常说的SFW到底是个啥?

在这堂课中，让我们来学习更多在数字网络世界中常用的有趣网络用语。7shifts/unsplashhttp,https“http”和“https”是万维网（www）传输文件用的协议。“http”是hy...

每天学会一个计算机网络协议之FTP

开始行文之前提出一个问题，相信大家在看完本文后一定可以回答当我们在网站上填写注册信息的时候，需要我们上传照片，上传的过程发生了什么？下面引入我们的主角，FTP文件传输协议FTPFileTransf...

即用即走，这3款文件分享工具真香

打工人的日常，免不了「文件分享存储服务」的需求。我们一般会选择不同的网盘，但是大家也知道，网盘不是限速就是叫你充值。今天跟大家简单推荐3款文件分享工具，既可以免登录匿名使用，而且操作简单稳定性也不错。...

安卓手机里的文件和照片与Mac互传的办法

因为HandShake一段时间未更新，似乎目前不可操作。我一时间未找到更好的「传输」办法，经实践操作，向大家介绍一下「安卓手机」，包括「一加」、「索尼」，都可用此方法，来进行文件传输到Mac的...

软网推荐:同一个平台选择不同的传输方法

平时上网的时候，我们经常要分享一些文件给其他朋友，一般通过云服务平台来实现。今天笔者给大家介绍的Worksphere传输服务，它提供了两种不同的分享方式，方便我们根据实际需要进行选择。一个链接分享所有...

跨平台不限速的免费文件传输网站（跨平台不限速的免费文件传输网站是什么）

大家好，欢迎来到天天惠分享，不知道各位平时都是用什么方法来进行文件跨平台传输的呢？是百度网盘?微信还是QQ?亦或是有线传输。虽然这些方法都可以达到传输的目的，但都有各自的缺陷，使用起来一言难尽。比如百...

全网最全最详细的全平台文件传输方法，解决你文件传输问题(一)

前言想必现在大多数人文件传输的方法还是使用qq微信，但是qq微信的文件传输有时候真是，...

文件传输工具有哪些?这3款堪称办公必备!

在不同设备间，想把文件从一台设备传输到另一台，尤其是大体积文件，更是免不了用到文件传输工具，可以说文件传输工具已成为提升效率的关键载体。面对海量文档、设计素材、会议纪要的流转需求，传统邮件附件、U盘拷...

小白也能用的跨网文件交换系统!10款简单易上手的文件摆渡工具

跨网文件交换系统对于需要频繁在不同网络环境中进行文件共享的用户来说至关重要。以下是10款简单易上手的文件摆渡工具，适合小白用户使用，帮助他们高效地分享和传输文件。10款简单易上手的跨网文件交换工具1....

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表