html - 如何垂直对齐列表的元素？

Question

我有一个 ul，其中一个子项位于左侧(以绝对位置垂直居中)，但其余元素也必须垂直对齐但显示为专栏。

左边的li没问题，就是找不到垂直对齐元素列表的方法

我创建了一个 fiddle在这里我展示了它目前是如何工作的

#outer {
  position: relative;
  height: 100vh;
}

.notAligned {
    position: absolute;
    left: 10%;
    top: 50%;
    top: calc(50% - 25px);
    transform: translateY(-50%);
    width: 35%; } 

.inner {
  margin-left: 50% !important;
  width: 50%;
  position: static;
}




/* Structure */
#outer {
  border: 1px solid green;
  padding: 20px;
  background: #f443363b;
}

.inner {
  border: 1px solid red;
  height: 3em;
  margin: 5px 0;}

<ul id="outer">
  <li class="notAligned">Not Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
</ul>

Answer 1

可以使用 flexbox

http://jsfiddle.net/zvaqhs40/

#outer {
  position: relative;
  height: 100vh;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

.notAligned {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  width: 35%;
}

.inner {
  margin-left: 50% !important;
  width: 50%;
  position: static;
}

/* Structure */
#outer {
  border: 1px solid green;
  padding: 20px;
  background: #f443363b;
}

.inner {
  border: 1px solid red;
  height: 3em;
  margin: 5px 0;
}

ol, ul, li {
    list-style: none;
}

<ul id="outer">
  <li class="notAligned">Not Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
</ul>