1. 使用line-height实现垂直居中

适合文本使用，子元素的line-height跟父元素的height一样即可

1.1 代码

<style>
    .div1 {
        width: 400px;
        height: 100px;
        background-color: blue;

    }

    p {
        line-height: 100px;
    }
</style>
<body>
<div class="div1">
    <p>使用line-height实现垂直居中</p>
</div>

1.2效果图

在这里插入图片描述

2. 使用relative相对定位居中

子元素使用相对定位 position: relative;top: 40%;，这个40%是这么来的呢？因为相对定位是根据元素的头去定位的。计算方式:（容器高度-元素自身高度）/2。（不建议使用）

2.1 代码

<style>
    .div2 {
        width: 400px;
        height: 100px;
        background-color: green;

    }
    .div2>p {
        position: relative;
        top: 40%;
    }
</style>
<body>
<div class="div2">
    <p>relative相对定位居中</p>
</div>
</body>

2.2 效果图

在这里插入图片描述

3. 使用absolute绝对定位居中

第三种方式跟第二种的差不多，不同的是这次使用了top: 50%; ，然后使用负值的margin解决定位差距，margin-top: -10.5px;为子元素自身高度的一半.最后注意子元素使用position: absolute;绝对布局时，要先设置父元素的position: relative为相对定位。（不建议使用，需要自己计算子元素的高度）

3.1 代码

<style>}
    .div3 {
        width: 400px;
        height: 100px;
        background-color: yellow;
        position: relative;
    }

    .div3 > p {
        position: absolute;
        top: 50%;
        margin-top: -10.5px;
    }
</style>
<body>
<div class="div3">
    <p>relative相对定位居中</p>
</div>
</body>

3.2 效果图

在这里插入图片描述

4. absolute+margin实现垂直居中

利用绝对定位top: 0;left: 0;bottom: 0;right: 0;这样子元素元素就会充满整个容器，这时候使用margin: auto 0;就能使元素居中啦。这个记得给这个元素设定高度哦。

4.1代码

<style>
    .div4 {
        width: 400px;
        height: 100px;
        background-color: plum;
        position: relative;
    }

    .div4 > p {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto 0;
        height: 21px;
    }
</style>
<body>
<div class="div4">
    <p>absolute+margin实现垂直居中</p>
</div>
</body>

4.2 效果图
在这里插入图片描述

5. 使用table-cell实现垂直居中

第五种没什么好解释的，记住这两句代码就完事了display: table-cell;vertical-align: middle;

5.1 代码

<style>
    .div5 {
        width: 400px;
        height: 100px;
        background-color: pink;
        display: table-cell;
        vertical-align: middle;
    }

    .div5 > p {
    /*  nothing to do  */
    }
</style>
<body>
<div class="div5">
    <p>table-cell实现垂直居中</p>
</div>
</body>

5.2 效果图

在这里插入图片描述

6. flex实现垂直居中(1)

第六种挺简单的,父元素设置display: flex;，然后子元素使用margin:auto 0;就可以实现居中了。

6.1 代码

<style>
    .div6 {
        width: 400px;
        height: 100px;
        background-color: cadetblue;
        display: flex;
    }

    .div6 > p {
        margin: auto 0;
    }
</style>
<body>
<div class="div6">
    <p>flex实现垂直居中(1)</p>
</div>
</body>

6.2 效果图

在这里插入图片描述

7. flex实现垂直居中(2)

同样是父元素设置display: flex;，这次子元素使用align-self: center;就可以实现居中了。

7.1 代码

<style>
    .div7 {
        width: 400px;
        height: 100px;
        background-color: darkcyan;
        display: flex;
    }

    .div7 > p {
        align-self: center;
    }
</style>
<body>
<div class="div7">
    <p>flex实现垂直居中(2)</p>
</div>
</body>

7.2 效果图

在这里插入图片描述

8. flex实现垂直居中(3)

这次父元素直接使用display: flex; +align-items: center;直接控制子元素垂直居中

8.3 代码

<style>
    .div8 {
        width: 400px;
        height: 100px;
        background-color: darkcyan;
        display: flex;
    }

    .div8 > p {
         /*  nothing to do  */
    }
</style>
<body>
<div class="div8">
    <p>flex实现垂直居中(2)</p>
</div>
</body>

8.2 效果图

在这里插入图片描述

css实现垂直居中的方法还有很多很多,我一般都是使用第八种，你们呢？欢迎在评论区留言(＾Ｕ＾)ノ~ＹＯ

# css # html
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区