html - 如何使div(在另一个div内)水平和垂直对齐

Question

我有 3 个水平对齐的 div(浅绿色)。在每个 div 中，有两个 div(红色和黑色)。

我想做的是水平对齐黑色 div，而不考虑红色 div。黑色 div 的 css 是

.black-div {
  width: 100%;
  height: 45px;
  max-width: 235px;
  display: inline-block;
  color: #33244a;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: normal;
  text-align: center;
  line-height: 43px;
  border: 2px dashed #d5d1d8;
  border-radius: 6px;
  box-sizing: border-box;
}

输出会是这样的

我对css一点都不擅长。我试过使用 position: fixed/absolute 但没有运气。

Answer 1

试一试。

使用 div 和 min-height。

section{
  display: inline-block;
  border: 1px solid red;
  width: 100px;
}
.textarea-wrap{
  overflow: hidden;
    min-height: 200px;
}
.textarea-wrap > textarea{
  width: 100%;
  resize: none;

}
.red{
  background-color: red;
  
}

<div>
  <section>
    <div class="textarea-wrap">
      <textarea rows="3">12312312</textarea>
    </div>
    <div class="red">
      red
    </div>
  </section>
  
  <section>
    <div class="textarea-wrap">
      <textarea rows="10">12312312</textarea>
    </div>
    <div class="red">
      red
    </div>
  </section>
  
  <section>
    <div class="textarea-wrap">
      <textarea rows="6">12312312</textarea>
    </div>
    <div class="red">
      red
    </div>
  </section>
</div>