사용하는 대신 align-self: center사용 align-items: center.

를 변경 flex-direction하거나 사용할 필요가 없습니다 text-align.

다음은 한 번의 조정으로 모든 코드를 작동시키는 코드입니다.

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의 상위 항목 인 –에 ul–가 display: flex없거나 display: inline-flex적용 되지 않았기 때문에 귀하 는 유동 항목 이 아닙니다 .

따라서, ul플렉스 컨테이너 li는 아니고, 플렉스 아이템은 아니고, align-self효과가 없습니다.

align-items속성과 유사 align-self은 적용을 제외하고, 플렉스 용기 .

(가) 때문에 li가요 성 용기이며, 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>

코덱 데모

기술적으로, 방법 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. 플렉스 아이템

플렉스 컨테이너의 각 유입 하위 항목은 플렉스 항목이되고, 플렉스 컨테이너 내부에 직접 포함 된 각 연속 텍스트는 익명의 플렉스 항목으로 래핑됩니다.

따라서의 텍스트 li는 플렉스 항목입니다.

답변

align-self: 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;
}

<ul class="list">
  <li>This is the text</li>
  <li>This is another text</li>
  <li>This is another another text</li>
</ul>

* {
  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%;
}

* {
  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>

.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>