CSS-居中问题（水平居中、垂直居中）

最新推荐文章于 2024-05-13 19:30:00 发布

A_Y_Y_H_A

最新推荐文章于 2024-05-13 19:30:00 发布

阅读量206

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/A_Y_Y_H_A/article/details/127948445

版权

行内元素水平居中

给父容器设置：

 text-align: center;

行内元素垂直居中

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

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

块级元素水平垂直居中

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

方法一：绝对定位 + translate

这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。因为 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>

方法二：绝对定位 + top,left,bottom,right = 0 + margin: auto

方法三：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>