Html 垂直中间对齐，无需固定高度即可实现快速响应的顶部导航

我想在我的顶部导航中垂直居中文本。 我试着给我的头一个高度：3em；并使用垂直对齐：中间对齐；但是，我的响应式折叠菜单无法处理固定高度。菜单不再显示，因为高度现在已固定。 我还尝试了。父填充：50%0；和。子页边距：0自动；但我不懂这个把戏。 我还试着使用线条高度：40px，看起来还可以，但我的汉堡菜单图标不会以这种方式居中。 我的汉堡菜单图标在使用%和translate时也有问题，我可以用这种方式将其居中-但使用折叠菜单时，它也会移动到50%，这是不需要的。更改为固定/绝对将使%崩溃并转换

html{
字体大小：calc（1.3em+1vw）
}
身体{
保证金：0；
字体系列：Helvetica，无衬线；
背景色：#fafafa；
}
/*标题*/
.标题{
位置：固定；
溢出：自动；
宽度：100%；
最大宽度：30em；
左边距：自动；
右边距：自动；
盒影：0 1px 3px rgba（0,0,0,12），0 1px 2px rgba（0,0,0,24）；
背景：#ffb347；/*旧浏览器的回退*/
背景：-webkit线性渐变（向右，#ffb347，#ffcc33）；/*Chrome 10-25，Safari 5.1-6*/
背景：线性渐变（向右，#ffb347，#ffcc33）；/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+//
}
.标题ul{
保证金：0；
填充：0；
列表样式：无；
溢出：隐藏；
}
李安{
显示：块；
填充：15px 20px；
文字装饰：无；
字体大小：0.7em；
颜色：#000；
背景颜色：蓝色；
}
.头李a：悬停，
.标题.菜单btn:悬停{
背景颜色：蓝色；
}
.标题.徽标{
显示：块；
浮动：左；
字体大小：1.3em；
填充：15px 20px；
文字装饰：无；
颜色：#000；
背景颜色：蓝色；
}
.标题.徽标：悬停{
}
/*菜单*/
.标题.菜单{
明确：两者皆有；
最大高度：0；
过渡：最大高度。2秒放松；
}
/*菜单图标*/
.标题.菜单图标{
光标：指针；
显示：内联块；
浮动：对；
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
填充：0.9em 0.4em；
用户选择：无；
背景：蓝色；
}
.标题.菜单图标.导航图标{
背景：#333；
显示：块；
高度：7px；
位置：相对位置；
过渡：背景。2放松；
宽度：40px；
}
.标题.菜单图标.导航图标：之前，
.标题.菜单图标.导航图标：之后{
背景：#333；
内容：''；
显示：块；
身高：100%；
位置：绝对位置；
过渡：所有。2放松；
宽度：100%；
}
.标题.菜单图标.导航图标：之前{
顶部：15px；
}
.标题.菜单图标.导航图标：之后{
顶部：-15px；
}
/*菜单btn*/
.标题.菜单btn{
显示：无；
}
.header.menu btn:选中~.menu{
最大高度：100%；
}
.header.menu btn:选中~.menu图标.navicon{
背景：透明；
}
.header.menu btn:选中~.菜单图标.navicon:之前{
变换：旋转（-45度）；
}
.header.menu btn:选中~.菜单图标.navicon:之后{
变换：旋转（45度）；
}
.header.menu btn:选中~。菜单图标：不（.steps）。navicon:之前，
.header.menu btn:选中~。菜单图标：不（.steps）。navicon:之后{
排名：0；
}
@介质（最小宽度：920px）{
.标题{
位置：相对位置；
}
李局长{
浮动：左；
}
李安{
}
.标题.菜单{
明确：无；
浮动：对；
最大高度：无；
}
.标题.菜单图标{
显示：无；
}
}

您可以使用css

transform

transform:translateY（10%）检查代码段


html{
字体大小：calc（1.3em+1vw）
}
身体{
保证金：0；
字体系列：Helvetica，无衬线；
背景色：#fafafa；
}
/*标题*/
.标题{
位置：固定；
溢出：自动；
宽度：100%；
最大宽度：30em；
左边距：自动；
右边距：自动；
盒影：0 1px 3px rgba（0,0,0,12），0 1px 2px rgba（0,0,0,24）；
背景：#ffb347；
/*旧浏览器的回退*/
背景：-webkit线性梯度（向右，#ffb347，#ffcc33）；
/*Chrome 10-25，Safari 5.1-6*/
背景：线性梯度（向右，#ffb347，#ffcc33）；
/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
}
.标题ul{
保证金：0；
填充：0；
列表样式：无；
溢出：隐藏；
}
李安{
显示：块；
填充：15px 20px；
文字装饰：无；
字体大小：0.7em；
颜色：#000；
背景颜色：蓝色；
}
.头李a：悬停，
.标题.菜单btn:悬停{
背景颜色：蓝色；
}
.标题.徽标{
显示：块；
浮动：左；
字体大小：1.3em；
填充：15px 20px；
文字装饰：无；
颜色：#000；
背景颜色：蓝色；
}
.header.logo:hover{}
/*菜单*/
.标题.菜单{
明确：两者皆有；
最大高度：0；
过渡：最大高度。2秒放松；
转化：translateY（19%）；
}
/*菜单图标*/
.标题.菜单图标{
光标：指针；
显示：内联块；
浮动：对；
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
填充：0.9em 0.4em；
用户选择：无；
背景：蓝色；
转化：translateY（10%）；
}
.标题.菜单图标.导航图标{
背景：#333；
显示：块；
高度：7px；
位置：相对位置；
过渡：背景。2放松；
宽度：40px；
}
.标题.菜单图标.导航图标：之前，
.标题.菜单图标.导航图标：之后{
背景：#333；
内容：''；
显示：块；
身高：100%；
位置：绝对位置；
过渡：所有。2放松；
宽度：100%；
}
.标题.菜单图标.导航图标：之前{
顶部：15px；
}
.标题.菜单图标.导航图标：之后{
顶部：-15px；
}
/*菜单btn*/
.标题.菜单btn{
显示：无；
}
.header.menu btn:选中~.menu{
最大高度：100%；
}
.header.menu btn:选中~.menu图标.navicon{
背影
.header {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

@media only screen and (max-width: 600px) {
  .header {
        display: block;
    }
}

.header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    margin-top: 1%;
}