垂直居中一个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*/ 
}