类似问题的解决方案对我的案例似乎不起作用，这比那些更具体，因此我不认为这是一个重复的问题。
我试图在一些flex元素中对齐文本，但text-align属性被完全忽略。检查this jsfiddle;有问题的元素是右边的元素，编号从1到3.为方便起见，注释标记CSS中的相对规则。
请注意，我需要元素为flex，否则它们将失去垂直对齐和/或它们当前的形状。
我想要的输出是三个元素在它们之间平均分配所有可用的垂直空间，占据所有可用的宽度，并且文本在每个块的中心位置，垂直和水平。
我想避免通过填充或类似的工具强制所需的位置，我还想避免在可能的情况下在HTML中添加更多标签。
您正在使用align-items:center对齐导航栏中的项目，但这仅在一个方向上。要在另一个方向做这个添加justify-content: center。
你可以摆脱text-align: center看看这个：
body {
color: rgb(240, 240, 240);
font-family: sans-serif;
background-color: rgb(150, 150, 150);
}
#content-bar {
background-color: rgb(0, 0, 0);
position: fixed;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
min-width: 100%;
height: 60%;
left: 0;
}
#content-bar > * {
padding: 1em;
}
#content-bar > main {
overflow: auto;
}
#content-bar > nav {
padding: 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
min-width: 15%;
}
#content-bar > nav > a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}<body>
<div id="content-bar">
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate in arcu id ullamcorper. Pellentesque luctus ut felis vitae tempor. In dui neque, condimentum sit amet diam id, tristique interdum ipsum. In semper nisi leo, at consequat sem interdum feugiat. Proin vestibulum, turpis in tempus pellentesque, enim libero auctor libero, sit amet ultrices est felis sit amet nisl. Mauris vel mi mi. Suspendisse eleifend laoreet mi a congue. Fusce non libero in velit sodales pharetra nec in nisl. Phasellus elementum a odio eu sodales. Nunc luctus, est non pellentesque tristique, nibh mi pulvinar tellus, ut tincidunt dolor eros at leo. Donec varius dolor eget quam aliquet varius. In at iaculis est. Proin at purus sed ligula tincidunt ullamcorper sit amet a elit. Duis mollis lacinia mi, non aliquam arcu pulvinar ac. Aenean quis imperdiet lorem.</p>
</main>
<nav>
<a href="#">Element 1</a>
<a href="#">Element 2</a>
<a href="#">Element 3</a>
</nav>
</div>
</body>