CSS：使用行高来进行垂直居中而不给出固定的高度。有办法吗？

Question

我经常使用行高来将文本垂直居中在内联元素中。

我做了这个演示：

body,
section {
  width: 100%;
}

section {
  background-color: lightGrey;
}

#wrap {
  margin: 30px auto;
  width: 100%;
  max-width: 800px;
  text-align: center;
  height: 48px;
}

.my-element {
  line-height: 48px;
}

<section>
  <div id="wrap">
    <span class="my-element">My element</span>
  </div>
</section>

工作正常。文本在灰色条中垂直居中。

但这种方法的问题是：我必须使用父元素的高度并将其固定在那里。

使用此模式时是否有更好，更动态的方法。

当父元素的高度发生变化时，它不会被破坏。

Answer 1

只需移除高度功能即可。执行此操作后，span和div之间将没有空格。所以你添加一个填充。 padding: 10px 0px 10px 0px;我在下面使用过，您甚至可以使用类似padding: 10px;的内容来降低其具体性。

body,
section {
  width: 100%;
}

section {
  background-color: lightGrey;
}

#wrap {
  margin: 30px auto;
  width: 100%;
  max-width: 800px;
  text-align: center;
  padding: 10px 0px 10px 0px;
}

<section>
  <div id="wrap">
    <span class="my-element">My element</span>
  </div>
</section>

Answer 2

您可以使用Flexbox并为垂直和水平中心设置align-items: center和justify-content: center。

＆＃13;

＆＃13;

section {
  background-color: lightGrey;
}

#wrap {
  margin: 30px auto;
  width: 100%;
  max-width: 800px;
  text-align: center;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<section>
  <div id="wrap">
    <span class="my-element">My element</span>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用transform: translate，而欺诈链接还有更多方法

＆＃13;

＆＃13;

body,
section {
  width: 100%;
}

section {
  background-color: lightGrey;
}

#wrap {
  position: relative;
  margin: 30px auto;
  width: 100%;
  max-width: 800px;
  text-align: center;
  height: 48px;
}

.my-element {
  position: relative;
  display: inline-block;
  top: 50%;
  transform: translateY(-50%);
}

＆＃13;

<section>
  <div id="wrap">
    <span class="my-element">My element</span>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;