Почему кнопка не вертикально выровнена?

Question

Я сделал простой демонстрационный пример, в котором у меня есть DIV, содержащее кнопку, но кнопка не вертикально я использовал высоту строки, а также позицию абсолютного и верхний край, но это делает не работа. Почему это не работает? Вот мой код: позиция

<div ng-app='app'> 
<div ng-controller='first as f'> 

    <div class='col-xs-4 text-center' style='background-color:red;height:70px;line-height:70px'> 

    <button type="button" class="btn btn-primary btn-lg btn-block" style:'position:absolute;top:10px'>Block level button</button> 

    </div> 

</div> 
</div> 

http://codepen.io/naveennsit/pen/KVawpW

Answer 1

Используйте следующий CSS. Сделать положение кнопки абсолютным и относительное положение.

.btn-block { 
    left: 50%; 
    position: absolute; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    width: 100%; 
} 

.col-xs-4 text-center{ 
    position:relative; 
} 

Working Codepen

Примечание: Если можно попытаться избежать встроенного CSS.

Answer 2

Try: относительное вместо позиции: абсолютный.

Answer 3

Вы используете CSS неправильно style:'position:absolute;top:10px.

это должно быть.

<button type="button" class="btn btn-primary btn-lg btn-block" style='position:absolute;top:10px'>Block level button</button> 

или вы можете использовать этот код, это также будет работать нормально.

<button type="button" class="btn btn-primary btn-lg btn-block" style='margin-top:10px;'>Block level button</button> 

здесь codepan который я отредактировал click here