垂直拉伸列表项

我建议使用 CSS3 规则的display: table系列。 如果操作正确，它们将是动态的并保持全高间距：

body, html {
    height: 100%;
    margin: 0;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
}
ul li {
    display: table-row;
}
ul li a { /* assuming an anchor child.  Can be anything */
    display: table-cell;
    vertical-align: middle;
    padding: 1em 3em;
}

演示：http://jsfiddle.net/6z3q35x0/1/

您的问题分为两部分：第一部分是强制<ul>元素拉伸以填充视口，第二部分是垂直和水平居中<li>内容。但是，居中需要修改标记。我们可以使用<div>元素将所有内容包装在<li>中。

对于居中，我们可以使用 CSS3 flexbox 来实现。这将是一个无JS的解决方案，尽管它享有较少的跨浏览器支持。对于视口大小，我们可以分别使用 vw 和vh单位。

ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}
li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}
li div {
  
}
/* For stylistics only */
li:nth-child(odd) {
  background-color: #ddd;
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet"/>
<ul>
<li><div>One</div></li>
<li><div>Two</div></li>
<li><div>Three</div></li>
<li><div>Three <br>a Half</div></li>
</ul>

但是，在某些情况下，使用 CSS flexbox 和视口单元并不理想——例如，iOS7 有一个有据可查的渲染错误，无法正确计算vh。在这种情况下，我们可能不得不依赖JS。每个<li>的高度简单地除以容器中存在的<li>数。

var calcHeight = function() {
  var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  var li = document.querySelectorAll("ul li");
  for(var i=0; i<li.length; i++) {
    li[i].style.height = (h/li.length)+'px';
  }
}
calcHeight();
window.onresize = calcHeight();

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
}
li {
  display: block;
  width: 100%;
  position: relative;
}
li div {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
li:nth-child(odd) {
  background-color: #ddd;
  }

<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet"/>
<ul>
  <li><div>One</div></li>
  <li><div>Two</div></li>
  <li><div>Three</div></li>
  <li><div>Three <br>a Half</div></li>
</ul>

这是一个 JavaScript 解决方案，它将根据视口的height给出height s。

强制ul取整个视口的高度：

小提琴演示

var li = document.getElementsByTagName('li');
function doMath() {
  for (i = 0; i < li.length; i++) {
    li[i].style.height = window.innerHeight / li.length + 'px';
  }
}
doMath();
window.onresize = doMath;

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  background: rosybrown;
}
span {
  display: block;
  position: relative;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
}
li:nth-of-type(2n) {
  background: plum;
}
body {
  margin: 0;
}

<ul>
  <li><span>One</span></li>
  <li><span>Two</span></li>
  <li><span>Three</span></li>
  <li><span>Three<br />a Half</span></li>
  <li><span>Four</span></li>
  <li><span>Five<br />a Half</span></li>
  <li><span>Six</span></li>
</ul>

强制li取整个视口的高度：

小提琴演示

var li = document.getElementsByTagName('li');
function doMath() {
  for (i = 0; i < li.length; i++) {
    li[i].style.height = window.innerHeight + 'px';
  }
}
doMath();
window.onresize = doMath;

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
li {
  background: rosybrown;
}
span {
  display: block;
  position: relative;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
}
li:nth-of-type(2n) {
  background: plum;
}
body {
  margin: 0;
}

<ul>
  <li><span>One</span></li>
  <li><span>Two</span></li>
  <li><span>Three</span></li>
  <li><span>Three<br />a Half</span></li>
  <li><span>Four</span></li>
  <li><span>Five<br />a Half</span></li>
  <li><span>Six</span></li>
</ul>

您需要为正文和 html 添加 100% 的高度，试试这个

<style>
body, html {
  height: 100%;
}
ul {
    height: 100%;
    display: table;
}
li {
   height: 25%;
    display: table-row;
}
li div{
    height: 25%;
    display: table-cell;
    vertical-align: middle;
}
</style>

Jsfiddle link： http://jsfiddle.net/d80xw55e/1/

由于您允许 Javscript，这很容易，我只是无法正确理解要点。希望你不会使用它？

function liH(){
  var lis = document.getElementsByTagName("li");
  var spans = document.getElementsByTagName("span");
  var liHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) / lis.length;
  
  for(var i = 0; i < lis.length; ++i){
    var spanH = spans[i].getBoundingClientRect().height;
    lis[i].style.paddingTop = ((liHeight - spanH) / 2) + "px";
    lis[i].style.paddingBottom = lis[i].style.paddingTop;
    //spans[i].style.top = -(spanH / 4) + "px"
  }
}
liH();
window.onresize = liH;

li {background:#eee;margin-bottom:5px;}
span {position:relative;}

<ul>
  <li><span>elem1</span></li>
  <li><span>elem2</span></li>
  <li><span>elem<br />3</span></li>
</ul>

视图不精确的原因是因为顶部的填充不会删除，并且因为我放置了 5px 边距来区分元素。