Html 垂直对齐引导3中的整行

我试图垂直居中引导3行。除了你在这里看到的HTML，我在网站上没有其他内容。到目前为止，它还没有真正起作用

我还尝试了一些在互联网上找到的代码，但似乎都不起作用。正如您所看到的，我试图将容器后面的所有内容包装在一个单独的

div

中，这样行就可以在其中居中。遗憾的是，它不起作用

<?php include_once ("header.php") ?>

<div id="bg"></div>

<div class="container">
  <!-- Navigation area -->
  <?php include_once ("navigation.php");?>
</div>

<div class="container">
  <div class="vertical">
    <div id="fade" class="about-wrapper animated fadeInLeft">
      <div class="row">
        <div class="col-xs-6 nova">
          <img class="img-responsive" src="../covers/nova-about.png" alt="" />
        </div>
        <div class="col-xs-6 opa">
          <div class="title">
            <h3>Leo</h3>
          </div>
          <div class="title">
            <h3>Age 7</h3>
          </div>
          <div class="title">
            <h3>Character</h3>
          </div>
          <div class="describ">
            <p>
              Leo is calm, playful and a tiny guard dog. He is very social and loves to play with other dogs.
              <br> He gets a little greedy when you caress him but he can also like it to relax alone on the couch. Overall a Dream dog to have and we are lucky he is ours.
            </p>
          </div>
          <div class="title">
            <h3>Introduction to the Family</h3>
          </div>
          <div class="describ">
            <p>
              Leo was our first dog we had. We nearly took a different one but as she was reserved, he "puppy-eyed" his way into Roannes heart.
              <br> His young appearence made him even more sympathetic and he enjoyed it instantly with his new Family.
              <br>
              <br><strong>Fun fact:</strong> I randomly met the real owner in the bus and he told me leo was only sent to SPA because he cant be alone in the house and was making too much noise. Well, lucky us!
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<?php include_once ("footer.php") ?>

为了澄清问题，我希望行本身居中，这样我就不必玩

top:25vh

，因为我认为它可能太不一致了。

.vertical{
最小高度：100vh；
显示器：flex；
对齐项目：居中；
}

狮子座
7岁
性格

狮子座沉着、顽皮，是一只小小的看门狗。他很爱交际，喜欢和其他狗一起玩。

当你抚摸他时，他会有点贪婪，但他也喜欢独自躺在沙发上放松。总的来说，这是一只梦寐以求的狗，我们很幸运他是我们的。

家庭介绍

利奥是我们养的第一条狗。我们几乎换了一个，但由于她很矜持，他用“小狗眼”进入了罗恩的心里。

他年轻的外表使他更加富有同情心，他很快就喜欢上了他的新家庭。



有趣的事实：我在公共汽车上偶然遇到了真正的主人，他告诉我，利奥被送到温泉疗养院只是因为他不能一个人呆在家里，而且噪音太大。我们真幸运！

.vertical{
最小高度：100vh；
显示器：flex；
对齐项目：居中；
}

狮子座
7岁
性格

狮子座沉着、顽皮，是一只小小的看门狗。他很爱交际，喜欢和其他狗一起玩。

当你抚摸他时，他会有点贪婪，但他也喜欢独自躺在沙发上放松。总的来说，这是一只梦寐以求的狗，我们很幸运他是我们的。

家庭介绍

利奥是我们养的第一条狗。我们几乎换了一个，但由于她很矜持，他用“小狗眼”进入了罗恩的心里。

他年轻的外表使他更加富有同情心，他很快就喜欢上了他的新家庭。



有趣的事实：我在公共汽车上偶然遇到了真正的主人，他告诉我，利奥被送到温泉疗养院只是因为他不能一个人呆在家里，而且噪音太大。我们真幸运！

要使div与class

行居中，请删除
.vertical
css并尝试：

.row {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 30%;
  width: 50%;
  margin: -15% 0 0 -25%;
}

将
top
和
left
设置为50%将使div的左上角位于父级的中间。然后使用负边距，我们可以将div移到左边并向上一点，以完成正确的居中操作。
要将div与类
行
居中，请删除
.vertical
css并尝试：

.row {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 30%;
  width: 50%;
  margin: -15% 0 0 -25%;
}

将
top
和
left
设置为50%将使div的左上角位于父级的中间。然后使用负边距，我们可以将div移到左边并向上一点，以完成正确的居中操作。
以下CSS似乎给出了所需的结果：

.row {
    display: flex;
    align-items: center;
    min-height: 100vh;
}

查看我为这个问题制作的小提琴：
以下CSS似乎给出了期望的结果：

.row {
    display: flex;
    align-items: center;
    min-height: 100vh;
}

查看我为这个问题制作的小提琴：
您是在尝试垂直对齐
div.vertical
还是
div.row
？只需使用
display:flex和
对齐项目：居中对于
.row
如果清楚地理解了您试图实现的目标，我将尝试实现垂直居中的行。就像那一排一样。我想试试。遗憾的是，您的flex解决方案不起作用。尝试了
.vertical
.row
.container
垂直居中，而不是水平居中。像
页边距顶部：50%
和
页边距底部：50%
您是否尝试垂直对齐
div.vertical
或
div.row
？只需使用
显示：flex和
对齐项目：居中对于
.row
如果清楚地理解了您试图实现的目标，我将尝试实现垂直居中的行。就像那一排一样。我想试试。遗憾的是，您的flex解决方案不起作用。尝试了
.vertical
.row
.container
垂直居中，而不是水平居中。像
margin-top:50%
&
margin-bottom:50%
似乎是合乎逻辑的，但是.row有它自己的属性，混合结果就是把它完全弄乱了。特别是内容。@Limitless抱歉，我以为它应该是给
.row
的。如果您指定
.vertical
而不是这似乎更好，它应该可以工作。2个问题。1.它不是100%中间（除非拿尺子不是有效的选择）和2。我喜欢引导的宽度和高度的串珠，但若我删除你们的H&W它会发生可怕的错误。我是说，有没有什么办法可以让BS的COLLAM大小保持不变，但保持在中等水平呢。增加：25vh；接近完美。但是我很确定它在屏幕大小和设备上是不一致的。这似乎是合乎逻辑的，但是。行有它自己的属性，而这种混合最终会把它完全搞砸。特别是内容。@Limitless抱歉，我以为它应该是给
.row
的。如果您指定