简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
css - 为何flex的align-items: center无法垂直居中？
PHP中文网
PHP中文网 2017-04-17 15:17:19
0
1
1031

参看语法规则完成练习，我只能水平居中，无法垂直居中，是少设置了什么吗？
我想实现的是在位置高度的情况下实现居中，这样可以用到flex吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 400px;
            height: 200px;
            background: #ccc;
            position: relative;
        }
        .leftCircle{
            position: absolute;
            left: 0;
            top: 0;
            background: #fc0;
            width: 50px;
            height:50px;
            -webkit-border-radius:0 0 50px 0;
            -moz-border-radius:0 0 50px 0;
            border-radius:0 0 50px 0;
        }
        .rightCircle{
            position: absolute;
            right: 0;
            bottom: 0;
            background: #fc0;
            width: 50px;
            height:50px;
            -webkit-border-radius:50px 0 0 0;
            -moz-border-radius:50px 0 0 0;
            border-radius:50px 0 0 0;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
<p class="box1">
    <p class="leftCircle"></p>
    <p class="rightCircle"></p>
</p>
</body>
</html>
PHP中文网
PHP中文网

认证高级PHP讲师

全員に返信(1)
迷茫
迷茫2017-04-17 15:19:19 1棟

ボディが垂直方向の中心になるように高さを与えます

リーリー
いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！