如何垂直对齐容器中的文本，[重复]答案

【问题标题】：How to vertically align text in a container, [duplicate]如何垂直对齐容器中的文本，[重复]
【发布时间】：2021-01-30 14:13:35
【问题描述】：

我在这个论坛上搜索了很长时间，但找不到任何可以回答我的问题的东西。

我有一个带有两个并排部分的容器。我希望左侧的文本根据右侧容器的高度垂直对齐其容器中的中心。

我使用了 my-auto、m-auto 和其他几个引导 css 类，以及我的一些自定义类，但它们似乎都不起作用。

请查看附加代码以了解（以整页打开或展开 sn-p 以便您可以并排查看各个部分）

<!DOCTYPE html>
<html>

<head>
  <!-- CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>

<body>
  <div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6 bg-light">
          <div class="m-auto p-5">
            <h2>Content that needs to be vertically aligned</h2>
          </div>
        </div>
        <div class="col-md-6 bg-primary">
          <div class="ml-5 space-top-2 space-bottom-2 pr-10">
            <div class="container">
              <div class="row space-bottom-2">
                <div class="col-md-3">

                </div>
                <div class="col-md-9">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum egestas leo laoreet nunc congue, at venenatis risus tristique. Suspendisse ac augue metus. Donec finibus velit at accumsan tristique. Sed eu sapien sed purus fringilla
                    pretium. Curabitur ac nisl at massa vulputate hendrerit eget non urna. Praesent nec turpis vitae velit semper efficitur. Nullam a diam rutrum, venenatis nisl sit amet, placerat felis. Nullam semper, augue ut vestibulum venenatis, quam
                    tellus ornare enim, ut mattis nibh ante vitae dui. Nunc elementum, sem at aliquet vulputate, ipsum tellus volutpat arcu, ut imperdiet orci turpis sit amet velit. Sed et eros nec ipsum sagittis scelerisque vel at urna. Nunc ante lacus,
                    facilisis in feugiat et, pharetra sit amet orci. Nullam tincidunt ligula et nunc tempor posuere. Sed faucibus cursus urna, non porta tortor dignissim in. Nulla in urna et ligula fermentum imperdiet.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

【问题讨论】：

标签： javascript html css alignment vertical-alignment

【解决方案1】：

通过在css中使用flex，我们可以做到这一点。

<div class="col-md-6 bg-light h-100 d-flex align-items-center justify-content-center">

这里，align-items-center 使文本垂直居中，justify-content-center 使文本水平居中。

【讨论】：

非常感谢，效果很好！

【解决方案2】：

将此粘贴到您的 css 文件中...

.col-md-6 {
    margin-top: auto;
    margin-bottom: auto;
  }

【讨论】：

这对我不起作用。我已经尝试过 my-auto，也是一样的。
它对我有用。您可以尝试将 display: inline-block 添加到此类吗？
它使它居中，但我已经尝试了一些让我得到类似结果的东西。问题是，背景的高度缩小到文字的大小，并没有保持整个区域的高度。

【解决方案3】：

只需添加：

.col-md-6{
  display: flex;
}

【讨论】：

【解决方案4】：

您可以为此使用CSS grid 的place-item。它将垂直/水平对齐您的文本。

.parent {
    display: grid;
    place-items: center;
    
    /* meaningless styling */
    width: 200px;
  height: 200px;
  background: lightblue;
    resize: both;
  overflow: auto;
  }

  <div class="parent" >
  <div class="box">Centered text.</div>
  </div>

【讨论】：