专栏首页Vincent-yuan前端学习(21)~css学习:如何让一个元素水平垂直居中?

前端学习(21)~css学习:如何让一个元素水平垂直居中?

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

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

行内元素水平居中

给父容器设置:

    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 automargin: 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-topmargin-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: centeralign-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不仅能让其在水平方向上居中,垂直方向上也是居中的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端学习(20)~css布局(十三)

    relative、absolute、fixed这三个属性,可以结合 z-index 来设置层级。

    Vincent-yuan
  • 前端学习(13)~css学习(七):浮动

    上图中可以看到,h1标签是块级元素,占据了整行,span标签是行内元素,只占据内容这一部分。

    Vincent-yuan
  • 前端学习(4)~html5详解(二)

    在HTML5的规范中,我们可以通过为元素增加 draggable="true" 来设置此元素是否可以进行拖拽操作,其中图片、链接默认是开启拖拽的。

    Vincent-yuan
  • css 元素居中

    前提:没有设置高度,高度由内容撑开。块级元素如果设置了高度,就不知道如何设置padding的数值 demo

    bamboo
  • 【垂直居中高级篇】你不知道的垂直居中方式

          在Css中对元素进行水平居中是很简单的,如果他是一个行内元素,对它的父元素应用text-align:center;如果是一个块级元素,就对自身应用...

    sam dragon
  • 字典相关.

    py3study
  • 《python深度学习》可视化滤波器

    (1)grads = K.gradients(loss, model.input)[0]报错显示RuntimeError: tf.gradients is no...

    bye
  • 字里行间的阅读:反对者的分析(CS CY)

    本文讲述了内容创建者和社交网络为实施基于法律和政策的规范,例如阻止仇恨言论和用户,所做的努力推动了无限制通信平台的兴起。异议者就是最近的一个尝试,它是一种浏览器...

    啊瓜7706942
  • Single Shot MultiBox Detector论文翻译——中英文对照

    SSD: Single Shot MultiBox Detector Abstract We present a method for detecting ob...

    Tyan
  • js实现拖动组件移动效果

    今天我来给大家介绍一种js特效,这种特效是当你用鼠标点击组件移动到其他地方后,这个组件就定在了那个地方,这种效果通常用来做视图化排版的。下面我来把代码贴出来给大...

    无邪Z

扫码关注云+社区

领取腾讯云代金券