用flex布局实现2种垂直居中

最初发表于: 2019-10-31 10:34:41

第1种垂直居中长这样

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .sub-wrap-1 {
            height: 130px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 1px solid blue;
        }


        .title {
            color: #103167;
            font-size: 24px;
            font-weight: 900;
            border: 1px solid red;
        }

        .sub-title {
            color: #495283;
            font-size: 16px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="sub-wrap-1">
        <div class="title">主标题</div>
        <div class="sub-title">副标题</div>
    </div>
</body>

</html>

第2种垂直居中长这样

代码就是把上文中代码中的column改为row