html+css 實現導航欄 文字居中

效果

文字水平垂直居中

html代碼

<header>
        <div class="header-container">
            <div class="header-nav">
                <ul>
                    <li><a href="#">首頁</a></li>
                    <li><a href="#">集團介紹</a></li>
                    <li><a href="#">專家聯盟</a></li>
                    <li><a href="#">合作機構</a></li>
                    <li><a href="#">新聞動態</a></li>
                </ul>
            </div>
        </div>
    </header>

css代碼

header .header-nav {
    height: 100px;
}
header .header-nav ul {
    width: 100%;
    height: 100px;
    border: 1px solid #000;
}
    
header .header-nav ul li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100px;
}

header .header-nav ul li a {
    display: block;
    padding: 0 30px;
    font-size: 20px;
}