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

问题描述

问 题

我在 这篇问答 里看到利用 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 来实现不定宽高元素的水平垂直居中了呢？

解决方案

我是这样实现的：

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>

---

这篇关于css - 关于 table-cell 水平垂直居中问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！