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;
    line-height: 100px;
    font-size: 20px;
}