html - 一个div在一个div中的垂直居中

Question

我想要完成的事情:让带有“col-md-1”(投票总数和投票箭头)的 div 在父 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%;
}

根据我阅读的内容，我认为在 centered-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*/
}