我想使用flexbox來垂直對齊& lt李& gt但沒有取得巨大的成功。
我在網上查過，很多教程實際上都使用了一個包裝器div，它從父類的flex設置中獲取align-items:center，但是我想知道是否可以去掉這個額外的元素？
在這個實例中，我選擇使用flexbox，因為列表項高度將是一個動態百分比。
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
align-self: center;
background: silver;
width: 100%;
height: 20%;
}<ul>
<li>This is the text</li>
</ul>不要使用align-self: center，而是使用align-items: 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屬性適用于flex項目。只是您的li不是flex項目，因為它的父項ul沒有應用display: flex或display: inline-flex。
因此，ul不是flex容器，li不是flex項目，align-self沒有任何作用。
align-items屬性類似于align-self，只是它適用于flex容器。
由于li是一個flex容器，align-items可用于垂直居中子元素。
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
/* align-self: center; */
align-items: center;
background: silver;
width: 100%;
height: 20%;
}<ul>
<li>This is the text</li>
</ul>最好的方法是將flexbox嵌套在flexbox中。你所要做的就是給孩子align-items: center。這將垂直對齊其父文本內部的文本。
// Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
align-items: center;
display: flex;
justify-content: center;
}
.child {
display: flex;
align-items: center;
}投票最多的答案是解決OP發布的這個具體問題，內容(文本)被包裝在內聯塊元素中。有些情況可能是關于在容器內垂直居中一個普通元素，這也適用于我的情況，所以你所需要的是:
align-self: center;我就不寫答案了，因為很多人已經給出了正確的答案。但是，我想給你展示一個有用的工具，可以讓你在以后的日子里，不再遇到這樣的問題。
在瀏覽器的開發工具中，您需要使用display: flex檢查一個元素，并單擊屏幕截圖中顯示的圖標。
然后，您將看到選擇一些顯示屬性的選項:flex，這樣您就可以輕松快速地檢查所有選項，而不知道可以使用什么。
結果
超文本標記語言
<ul class="list">
<li>This is the text</li>
<li>This is another text</li>
<li>This is another another text</li>
</ul>使用align-items代替align-self，我還為列添加了flex-direction。
半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.list {
display: flex;
justify-content: center;
flex-direction: column; /* <--- I added this */
align-items: center; /* <--- Change here */
height: 100px;
width: 100%;
background: silver;
}
.list li {
background: gold;
height: 20%;
}將li中的顯示設置為flex，并將align-items設置為center。
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;
}使用display: flex可以控制HTML元素的垂直對齊。
.box {
height: 100px;
display: flex;
align-items: center; /* Vertical */
justify-content: center; /* Horizontal */
border:2px solid black;
}
.box div {
width: 100px;
height: 20px;
border:1px solid;
}<div class="box">
<div>Hello</div>
<p>World</p>
</div>Align-self不對齊li中的項目。反而把李當成了一個整體。
使用align-items將對齊li中的文本。 看看這段代碼。它工作了。
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
align-items: center;
background: silver;
width: 100%;
height: 20%;
}<ul>
<li>This is the text</li>
</ul>* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
align-items: center;
background: silver;
width: 100%;
height: 20%;
}<ul>
<li>This is the text</li>
</ul>就憑你李的身高就叫多一件事行身高
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
align-self: center;
background: silver;
width: 100%;
height:50px;line-height:50px;
}<ul>
<li>This is the text</li>
</ul>.flex-container {
display: flex;
height: 300px;
align-items: center;
justify-content: center;
width: 100%;
}
.flex-child {
display: flex;
width: 100%;
background-color: khaki;
border: 1px solid #000;
align-items: center;
justify-content: center;
height: 100px;
margin: 10px;
padding: 10px;
}<div class="container flex-container">
<div class="flex-child item-1">English</div>
<div class="flex-child item-2"> English</div>
<div class="flex-child item-3"> English</div>
</div>* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
align-items:center;
background: silver;
width: 100%;
height: 20%;
}<ul>
<li>This is the text</li>
</ul>您可以將ul和li顯示更改為表格和表格單元。那么，垂直對齊將為您工作:
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