div内のdivの垂直センタリング

Question

達成目標： "col-md-1"（投票合計と投票矢印）のdivを持つ、

の中心に垂直に配置された50％を縦にそれがベースの中央に： -

私の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のクラスで私はトップを呼び出すことができると考えましたpでarent div。誰でもなぜそれが動作していないか知っていますか？垂直整列する

Answer 1

使用フレキシボックスは、それは別のテキストは無意味である上、より良い

.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*/ 
}