关于 table-cell 水平垂直居中问题？

Question

我在 这篇问答 里看到利用 table-cell 来实现不定宽高水平垂直居中。

我实际操作了下：

* {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.parent {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.child {
  width: 100px;
  height: 50px;
  background-color: green;
  display: inline-block;
  vertical-align: middle;
}

<div class="parent">
  <div class="child">
    Demo
  </div>
</div>

上面这个运行结果无法实现水平垂直居中。

利用 table-cell 实现 子元素 水平垂直居中时，是不是 父元素 必须指定明确的像素值，而不能使用百分比？那是不是无法用 table-cell 来实现不定宽高元素的水平垂直居中了呢？

Answer 1

我是这样实现的：

CSS：

html,body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.outter {
  display: table;
  background-color: lightgreen;
  width: 100%;
  height: 100%;
}

.inner {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.foo {
  background-color: lightblue;
  display: inline-block;
  width: 50%;
  height: 50%;
}

---

HTML：

<div class="outter">
  <div class="inner">
    <div class="foo">

    </div>
  </div>
</div>

---

Answer 2

你上面的的父元素没有没有大小，导致里面的盒子没有相对性，所以，我写了个flex的。看看研究一下，会有收获的。

<style type="text/css">
    .parent {

        width: 300px;

        height: 300px;

        background: #111;

         display: flex;

         align-items: center;         /* 垂直居中 */

         justify-content: center;    /* 水平居中 */

    }

    .parent .child {

         width: 100px;

         height: 100px;

         background-color: #fff;        

    } 

</style>

Answer 3

因为设置了 table-cell 之后 父元素就变成了一个单元格，你可以在父元素之外再加一层嵌套，定义为 table,就行了