我想使用flexbox垂直对齐一些内容在一个<li>，但没有很大的成功。
我在网上检查过，许多教程实际上使用了一个包装器div，它从父上的伸缩设置中获得align-items:center，但我想知道是否有可能删除这个额外的元素?
在这个例子中，我选择使用flexbox，因为列表项的高度将是一个动态%。
* { 填充:0; 保证金:0; ｝ 超文本标记语言 身体{ 高度:100%; ｝ ul { 高度:100%; ｝ 李{ 显示:flex; justify-content:中心; align-self:中心; 背景:银色; 宽度:100%; 高度:20%; ｝ < ul > <li>这是文本</li> < / ul >
当前回答
将li中的显示设置为flex，并将align-items设置为居中。
li {
display: flex;
/* Align items vertically */
align-items: center;
/* Align items horizontally */
justify-content: center;
}
我个人也会以伪元素为目标，并使用边界框 (通用选择器*和伪元素)
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
其他回答
您可以将ul和li显示更改为table和table-cell。然后，垂直对齐将为您工作:
ul {
height: 20%;
width: 100%;
display: table;
}
li {
display: table-cell;
text-align: center;
vertical-align: middle;
background: silver;
width: 100%;
}
http://codepen.io/anon/pen/pckvK
将li中的显示设置为flex，并将align-items设置为居中。
li {
display: flex;
/* Align items vertically */
align-items: center;
/* Align items horizontally */
justify-content: center;
}
我个人也会以伪元素为目标，并使用边界框 (通用选择器*和伪元素)
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
使用align-items: center代替align-self: center。
不需要改变弯曲方向或使用文本对齐。
下面是你的代码，只做了一个调整，就能让它全部工作:
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
/* align-self: center; <---- REMOVE */
align-items: center; /* <---- NEW */
background: silver;
width: 100%;
height: 20%;
}
align-self属性适用于伸缩项。除非你的li不是一个伸缩项，因为它的父元素ul没有应用display: flex或display: inline-flex。
因此，ul不是一个伸缩容器，li不是一个伸缩项，align-self没有任何作用。
align-items属性类似于align-self，只不过它适用于伸缩容器。
因为li是一个伸缩容器，align-items可以用来垂直居中子元素。
* { 填充:0; 保证金:0; ｝ Html, body { 高度:100%; ｝ ul { 高度:100%; ｝ 李{ 显示:flex; justify-content:中心; /* align-self:居中;* / 对齐项目:中心; 背景:银色; 宽度:100%; 高度:20%; ｝ < ul > <li>这是文本</li> < / ul >
codepen演示
从技术上讲，这是align-items和align-self的工作方式…
align-items属性(在容器上)设置align-self(在项目上)的默认值。因此，align-items: center意味着所有的伸缩项目都将被设置为align-self: center。
但是您可以通过调整单个项上的align-self来覆盖这个默认值。
例如，您可能希望等高列，因此容器设置为align-items: stretch。但是，有一项必须固定在顶部，因此它被设置为align-self: flex-start。
例子
文本如何成为伸缩项?
有些人可能会想，一连串的文字是如何…
<li>This is the text</li>
是li的子元素。
原因是，没有被内联级元素显式包装的文本在算法上由内联框包装。这使得它成为一个匿名内联元素和父元素的子元素。
来自CSS规范:
9.2.2.1匿名内联 盒子 直接包含在块容器元素中的任何文本 必须作为匿名内联元素处理。
flexbox规范提供了类似的行为。
4. Flex项目 伸缩容器的每个流中的子元素都成为伸缩项，并且每个子元素 直接包含在伸缩件内的连续文本运行 容器包装在匿名伸缩项中。
因此，li中的文本是一个伸缩项。
* { 填充:0; 保证金:0; ｝ Html, body { 高度:100%; ｝ ul { 高度:100%; ｝ 李{ 显示:flex; justify-content:中心; 对齐项目:中心; 背景:银色; 宽度:100%; 高度:20%; ｝ < ul > <li>这是文本</li> < / ul >
投票最多的答案是解决OP发布的这个特定问题，其中内容(文本)被包装在一个内联块元素中。有些情况下，可能是关于一个正常的元素在容器内垂直居中，这也适用于我的情况下，所以你所需要的是:
align-self: center;
