Html 在固定高度容器中垂直居中元素

我有一个网站，需要一个基于像素的导航栏-在这种情况下

高度：80px

问题是，我无法将

ul

和

li

元素垂直居中

我试过使用：

top:50%；transform:translate（0，-50%）

，如我的JSFIDLE所示，还有flex定位，但都不起作用

Jsfiddle：

标题{
高度：80px；
位置：固定；
排名：0；
过渡：前0.2秒缓进缓出；
宽度：100%；
}
页脚{
背景：ddd；
}
* {
颜色：透明
}
导航{
身高：100%；
宽度：100%；
背景色：深蓝色；
}
导航ul{
列表样式：无；
文本对齐：居中；
保证金：0；
填充：0；
最高：50%；
转换：翻译（0，-50%）；
}
李国荣{
显示：内联块；
浮动：左；
}
海军ulli a{
显示：块；
填充：15px；
文字装饰：无；
颜色：#aaa；
字号：800；
文本转换：大写；
利润率：0.10px；
}

您需要将

位置：相对
添加到
nav
和
位置：绝对
添加到
nav ul
（以获得
顶部：50%；转换：翻译（0，-50%）；
工作），或者您可以使用
显示：flex；对齐项目：居中
nav
。我会用flexbox


标题{
高度：80px；
位置：固定；
排名：0；
过渡：前0.2秒缓进缓出；
宽度：100%；
}
页脚{
背景：ddd；
}
* {
颜色：透明
}
导航{
身高：100%；
宽度：100%；
背景色：深蓝色；
显示器：flex；
对齐项目：居中；
}
导航ul{
列表样式：无；
文本对齐：居中；
保证金：0；
填充：0；
}
李国荣{
显示：内联块；
浮动：左；
}
海军ulli a{
显示：块；
填充：15px；
文字装饰：无；
颜色：#aaa；
字号：800；
文本转换：大写；
利润率：0.10px；
}






添加显示器柔性和自中心对齐：


标题{
高度：80px；
位置：固定；
排名：0；
过渡：前0.2秒缓进缓出；
宽度：100%；
}
页脚{
背景：ddd；
}
* {
颜色：透明
}
导航{
身高：100%；
宽度：100%；
背景色：深蓝色；
显示器：flex；
}
导航ul{
列表样式：无；
文本对齐：居中；
保证金：0；
填充：0；
最高：50%；
自对准：居中；
}
李国荣{
显示：内联块；
浮动：左；
}
海军ulli a{
显示：块；
填充：15px；
文字装饰：无；
颜色：#aaa；
字号：800；
文本转换：大写；
利润率：0.10px；
}






似乎您的代码可以简单得多：


nav{
高度：80px；
位置：固定；
排名：0；
宽度：100%；
显示器：flex；
对齐内容：居中；/*子元素的水平对齐（可选）*/
背景色：深蓝色；
}
导航a{
文字装饰：无；
颜色：#aaa；
字号：800；
文本转换：大写；
显示器：flex；
对齐项目：居中；/*文本的垂直对齐*/
边框：1px红色虚线；
}
a+a{
左边距：20px；
}
在块的静态高度的情况下，可以使用中间垂直对齐的内联[-block]元素，在没有包裹容器的情况下将元素居中放置


。垂直容器{
高度：80px；
边框：1px纯黑；
空白：nowrap；
/*这可防止垂直块从容器中“脱落”*/
}
.垂直对准器{
显示：内联块；
垂直对齐：中间对齐；
身高：100%；
宽度：0；
}
.垂直内容{
显示：内联块；
垂直对齐：中间对齐；
边框：1px纯红；
空白：正常；
/*重置内容的空白*/
}
应垂直位于容器中间的文本
CSS替换

header {
    height: 80px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
    display: table;
}

footer { background: #ddd;}
* { color: transparent}
nav {
    height: 100%;
  width: 100%;
  background-color: bisque;
}
nav ul {
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    height: 80px;
}
nav ul li {
  display: inline-block;
    float: left;
}
nav ul li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #aaa;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 10px;
}

这里更改了标题css和导航ul css，它的工作非常精细，您只需添加
位置：relative；溢出：隐藏至
导航ul
规则。
位置：相对
使转换工作，并
溢出：隐藏使其从其子级获取高度（浮动，需要清除）。我在链接周围添加了边框，以显示可单击区域，即标题的整个高度。这里的其他答案仅涵盖课文。不知道你想走哪条路。