当'top'值改变时，文本不保留在父div中

Question

我有一些想要出现在文本后面的图像，我希望文本在父div中居中（水平和垂直居中），但每当我将'top'值更改为50％时，文本跳转到顶部父div之外的页面。

我正在使用Bootstrap。

.row_comm {
        .community-body{
          position: absolute;
          top: 50%;   
        }
        img {
          display: block;
          width: 100%;
        }
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
 <div class="row row_comm">
      <div class="container">
        <div class="col-lg-4 col-lg-offset-2">
          <img src="https://via.placeholder.com/100x100" class="active">
          <img src="https://via.placeholder.com/100x100" class="inactive">
          <img src="https://via.placeholder.com/100x100" class="inactive">
        </div>
        <div class="community-body">
          <div class="row">
            <div class="col-lg-6 col-lg-offset-4">
              <h1>Join.</h1>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-5 col-lg-offset-7">
              <p class="lead">Some text.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

您将需要相对于community-block的父级分配位置，因此在这种情况下将row_com设置为position: relative。

Answer 2

将position:relative添加到主父级和宽度以包含绝对内部。