[CSS] CSS display:flex实现内容水平垂直居中展示

唯一Chat

发布于 2022-07-24 10:26:42

8580

发布于 2022-07-24 10:26:42

文章被收录于专栏：陶士涵的菜地陶士涵的菜地

display:flex实现内容水平垂直居中展示

需要增加下面两点就能实现

首先父级元素必须有高度，没有高度就无法垂直居中，如果想全屏垂直居中，可以设置高度为100vh

比如body设置为这样

    body{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

里面的子元素就会垂直水平居中显示

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>独立私有化智能在线客服系统</title>
</head>
<body>
<style>
    body{
        background: rgb(242,243,247);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;

    }
    .sub,.main,.admin{
        letter-spacing: 18px;
        font-family: fangsong;
        font-size: 38px;
        writing-mode: vertical-rl;
    }
    .main{
        font-size: 60px;
        margin: 0px 20px;
    }
    .admin{
        display: block;
        text-decoration: none;
        color: red;
        border: 2px solid red;
        padding: 10px 0px 2px 0px;
        border-radius: 12px;
        margin-top: 150px;
        font-size: 20px;
        letter-spacing: 5px;
    }
    .admin:hover{
        color: red;
    }
    .sub span{
        font-size: 50px;
    }
</style>

<a href="/login" target="_blank" class="admin">在线客服</a>

<h1 class="main">
    各路相知
</h1>

<div class="sub">互聊片刻，<span>结交</span></div>



</body>

</html>

效果：