div中的中心块，具有绝对位置

Question

我的div有2个块：

• 有信息的人
• 另一个绝对值位于底部（高度可变）

问题：我想将图片放在div的中央，但不包括绝对块。

What I have

What I want

我的实际代码： https://jsfiddle.net/ph4kfuy9/5/

.block {
  height: 400px;
  background-color: #EEE;
  margin: 20px 50px;
  position: relative;
}

.text {
  padding: 20px;
  background-color: #CCC;
  width: auto;
  text-align: center;
  width: 50%;
  margin: 0 auto;
}

.absolute {
  padding: 20px;
  background-color: #555;
  color: #FFF;
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
}

<div class="block">
  <div class="text">
    <p>My text</p>
    <div>Lorem Ipsum</div>
    <p>Another text</p>
  </div>
  <div class="absolute">
    My absolute block
    <p>
      Quam ob rem cave Catoni anteponas ne istum quidem ipsum, quem Apollo, ut ais, sapientissimum iudicavit; huius enim facta, illius dicta laudantur. De me autem, ut iam cum utroque vestrum loquar, sic habetote.
    </p>
  </div>
</div>

谢谢

Answer 1

我会为此使用flex

db.collection("test").whereField("number", isEqualTo: 2)

.block {
  height: 400px;
  background-color: #EEE;
  margin: 20px 50px;
  
  display:flex;             /* make this flex */
  flex-direction:column;    /* line up chld elements in a column */
}

.text {
  padding: 20px;
  background-color: #CCC;
  width: auto;
  width: 50%;
  margin: 0 auto;
  
  flex-grow:1;              /* make this take up remaining space that footer doesn't */
  display:flex;             /* make this flex */
  flex-direction:column;    /* line up chld elements in a column */
  justify-content:center;   /* vertical centre */
  align-items:center;       /* horizontal centre */
}

.footer {                 /* no need to be absolute */
  padding: 20px;
  background-color: #555;
  color: #FFF;
  width: 100%;
  box-sizing: border-box;
}