多个相同高度列的垂直居中*无* flexbox [重复]答案

【问题标题】：Vertical Centering for multiple identical-height columns *without* flexbox [duplicate]多个相同高度列的垂直居中*无* flexbox [重复]
【发布时间】：2016-08-07 19:21:52
【问题描述】：

虽然 flexbox 现在几乎是标准，并且大多数用户都可以使用它，但我想要一个强大的老式、向后兼容的解决方案，用于拥有多个相同高度的列，并且其内容也是垂直的居中，不依赖于 flexbox。这听起来很简单，但熟悉老式 html 的人都知道这绝非简单。

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

这是我 fork 的 codepen，代码由 gitter.im 用户 @jdtdesigns 创建：http://codepen.io/ihatecoding/pen/WwOyya

这是他写的html：

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header>
    <h1 class="text-center">Header</h1>
  </header>
  <section class="main">
    <div class="left">
      <nav>
        <h3>Menu</h3>
        <a href="#">Home</a>
        <a href="#">Contact</a>
        <a href="#">About</a>
        <a href="#">Support</a>
        <a href="#">Home</a>
        <a href="#">Contact</a>
        <a href="#">About</a>
        <a href="#">Support</a>


      </nav>
    </div>
    <div class="center">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nulla quibusdam adipisci, enim libero ducimus, et? Porro ex in temporibus. Temporibus expedita aliquam, doloribus, perspiciatis in tempora soluta repellendus voluptatum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et, quasi eligendi voluptatem praesentium repellendus! Cupiditate officia culpa placeat. Molestiae nulla laborum, est magni, cupiditate qui ullam eum aliquam consequuntur.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste consequuntur ea accusantium nemo amet. Sint, suscipit assumenda eos, exercitationem perferendis adipisci numquam sunt, nesciunt repellendus fugit vel ut saepe eligendi.</p>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>

    </div>
    <div class="right">
      <div class="ad">
        <h1>Ad</h1>
      </div>
      <div class="ad">
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
        <h1>Ad</h1>
      </div>
    </div>
  </section>
  <footer>
    <h1 class="text-center">Footer</h1>
  </footer>
</body>
</html>

这是他写的css：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.text-center {
  text-align: center;
}

.main {
  display: table;
  width: 100%;
}
.main > * {
  display: table-cell;
  vertical-align: middle;
}

.left, .right {
  width: 20%;
  background: #4385db;

  text-align: center;
  padding: 40px;
}

.center {
  width: 60%;
  padding: 20px;
}

header, footer {
  background: #9842a5;
  padding: 20px;
}

nav > * {
  display: block;
}
a {margin:20px;}

【讨论】：