div中div的垂直居中

Question

我想要完成的是:让div带有“col 1”(投票总数和投票箭头)，在父div的中心垂直对齐。

我的html-

  <div class="row container-fluid">
    <div class="col-md-1 centered-div">
      <p id='vote-total-{{question.pk}}'>vote total: {{question.votes}}</p>
    </div>
    <div class="col-md-1 centered-div">
        <p class='question-votes'>
          <a id='question-upvote-{{question.pk}}' href="{% url 'questions:upvote' pk=question.pk %}">
            <span class="glyphicon glyphicon-arrow-up"></span>
          </a>
        </p>
        <p class='question-votes'>
          <a id='question-downvote-{{question.pk}}' href="{% url 'questions:downvote' pk=question.pk %}">
        <span class="glyphicon glyphicon-arrow-down"></span>
          </a>
        </p>
    </div>
    <div class="col-md-4">
      <h2>
        title: {{question.title}}
      </h2>
      <h3>
    details: {{question.details}}
      </h3>
      <p>asked by: <a href="{% url 'accounts:detail' pk=question.user.id %}">{{question.user.username}}</a>,  on: {{question.created_at}}</p>
      <p>
        {% if user.is_authenticated and question.user.username == request.user.username and not hide_delete %}
            <a href="{% url 'questions:delete' pk=question.pk %}" title="delete" class="btn btn-simple">
          <span class="glyphicon glyphicon-remove text-danger"></span>
          <span class="text-danger icon-label">Delete</span>
            </a>
        {% endif %}
      </p>
    </div>
  </div>

我的css -

.container-fluid {
  height: 100%;
  padding-left: 0px;
  padding-right: 0px;
}
.centered-div {
  position: absolute;
  top: 50%;
}

根据我所读到的，我认为在center - div类中，我可以调用top: 50%来根据父div将其垂直居中。有人知道它为什么不工作吗？

Answer 1

使用flexbox垂直对齐，这样它就可以在所有屏幕上进行修复

.centered-div {
  position: absolute;
  display:flex;
  justify-content:center;
  align-items:center;
 flex-direction:row;/*change to column if not as in expected direction.*/
 height:80px; /*Set height if not specified earlier*/
}