我们如何修复vertical-align：middle;没有给高度的css属性？

Question

我有一个div，我想要文本到Verticle对齐没有高度因为我不知道用户输入了多少文本... ##

.main-body {
  display: table;
  height: 100px;
  border:1px solid #000;

}

.inner-body {
  display: table-cell;
}

.inner-body p {
  vertical-align: middle;
}

<div class="main-body">
  <div class="inner-body">
    <p>Hello World!</p>
  </div>
</div>

Answer 1

在vertical-align: middle;

上使用.inner-body

.main-body {
  display: table;
  border:1px dotted
}

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

<div class="main-body">
  <div class="inner-body">
    <p>Hello World!</p>
  </div>
</div>

Answer 2

为vertical-align:middle inner-body

添加class

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

.main-body {display:table; height:100px;}
.inner-body {display:table-cell;vertical-align: middle;}
.inner-body p {}

<div class="main-body">
<div class="inner-body">
<p>Hello World!</p>
</div>
</div>

Answer 3

有些SO用户已经回复了，但如果您对flex感到满意，那么：

＆＃13;

＆＃13;

.inner-body { /*or .main-body*/
  margin: 0 auto;
  display: flex;
  justify-content: center; /* or flex-start for left align*/
  align-items: center;
  background-color: red;
  width: 300px;
  height: 70px;
}

＆＃13;

HTML
<div class="main-body">
  <div class="inner-body">
    <p>Hello World!</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

background-color height width仅用于演示。