如何在css中垂直居中p标签文本[重复]答案

【问题标题】：How to vertically center p tags text in css [duplicate]如何在css中垂直居中p标签文本[重复]
【发布时间】：2018-08-26 12:46:24
【问题描述】：

我正在处理 fiddle，我希望在其中将 css 中的文本垂直居中。

我用来构建小提琴的 HTML 代码是：

<div class="poster text-center pt-4">
   <div class="item">
      <img class="item_poster_image" src="https://i.imgur.com/lbDo4tM.jpg">
   </div>
   <div class="poster_name_location">
      <p class="mb-0">posted by,<span style="color:#ff8b5a;">hello</span></p>
      <p class="poster_location">located in, <span style="color:#ff8b5a;">San Francisco, California</span></p>
   </div>
</div>

问题陈述：

我想知道我需要在fiddle 中添加哪些 CSS 代码，以便文本位于图像的中心。

我尝试添加以下 css 代码，但它似乎不起作用。

.poster_name_location
{
middle
}

【问题讨论】：

试试“margin-top: 50%;” .. 这将使 div 从它的最顶部开始居中 .. 所以如果这个 div 的高度应该是 10%，你可能想让它像 45%。
您将align-items: center; 添加到poster：jsfiddle.net/g658rhvy/19 ...您可以从.poster_name_location 中删除justify-content。注意，这两个属性都属于 Flexbox 容器（带有display:flex 的那个）
还要注意，只有 display 值的前缀是不够的，例如-ms-flex（而不是 -ms-flexbox 顺便说一句），它也需要在 flexbox 属性的其余部分上。

标签： html css vertical-alignment

【解决方案1】：

您可以使用 flex-box 和 align-items: center 来实现。

.item_poster_image {
  height: 120px;
  width: 120px;
  -o-object-fit: contain;
  object-fit: contain;
  max-width: 100%;
  border-radius: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.item {
  padding: 0;
  margin: 0px 10px 0px 10px;
}

.poster {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.poster_name_location {
  text-align: left;
  display: block;
  justify-content: center;
}

.text-center {
  align-items: center;
}

<div class="poster text-center pt-4">
  <div class="item">
    <img class="item_poster_image" src="https://i.imgur.com/lbDo4tM.jpg">
  </div>
  <div class="poster_name_location">
    <p class="mb-0">posted by, <span style="color:#ff8b5a;">hello</span></p>
    <p class="poster_location">located in, <span style="color:#ff8b5a;">San Francisco, California</span></p>
  </div>
</div>

【讨论】：

谢谢，更新了例子