Question

我有以下标记：

<div class="container">
  <div class="grandparent">
    <span>Hello World</span>
    <div class="parent">
      <div class="child">
        <i class="fa fa-star fa-5x"></i>
        <span>Good For Yoouuu...</span>
      </div>
    </div>
  </div>
</div>

这个CSS：

.container {
  position: relative;
  height: 350px;
  /*This is unknown, set here for example purposes */
}
.grandparent {
  height: 100%;
  border: 1px solid black;
}
.parent {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.child span {
  display: block;
}

这似乎没有考虑span元素之外的.parent元素。

如果不设置竞争的div元素，如何在容器中将子span垂直居中，而不设置明确的高度？

这是一个小提琴：https://jsfiddle.net/15hgwu54/

编辑：我不认为这与提议的问题重复，因为那个没有考虑在容器内竞争空间的元素。如果唯一的元素是.parent div，则链接问题中的解决方案会起作用，但由于还有span占用空间，因此这些答案无法正确居中.parent div

垂直中心儿童元素与其他孩子

0 个答案: