垂直居中一個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%; 
} 

根據我閱讀，我認爲在中心-DIV級我能頂撥打：50％垂直居中它基於在p arent 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*/ 
}