ul li - 当ul高度为100％时如何居中

Question

我需要UL在UL中间和中心

ul {
  width:100%;
  height:100%;
  text-align: center;
  position: absolute;
  top: 0;
  background: red;
}
li {

}

http://jsfiddle.net/3Ezx2/1629/

谢谢

Answer 1

ul {
  width:100%;
  height:100vh;
  text-align: center;
  background: red;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

这是您需要垂直居中列表项所需的所有CSS。请参阅更新的小提琴：http://jsfiddle.net/3Ezx2/1633/

Answer 2

其中一个选项是使用flexbox：

// here extending your original css proposal

ul {
  width:100%;
  height:100%;
  text-align: center;
  position: absolute;
  top: 0;
  background: red;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}
li {
  background-color: white;
  border: 1px solid;
}

JSfiddle - http://jsfiddle.net/37eekc8n/

Answer 3

试一试：http://jsfiddle.net/3Ezx2/1635/

div {
  background: green;
  position: absolute; 
  width:100%;
  height:100%;
}
ul {  
 position: absolute;  
 width:100%;
  height:100%;
  text-align: center;
 top: 50%;
}

   <div id="background">
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
</div>

一个 div 到背景，顶部：50％属性。

希望它对你有所帮助。

Answer 4

支持： Chrome ， Firefox ， IE8 + ， Opera ， Safari

＆＃13;

＆＃13;

div {
    width:100%;
    height:100%;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    background: red;
}

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 0;
    list-style: none;
}

＆＃13;

<div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;