부트 스트랩을 사용하여 버튼을 중앙에 배치하는 방법은 무엇입니까?

Question

친구! 비디오리스트를 만들었습니다. 부트 스트랩 그리드 시스템을 사용하여 만듭니다. 이것은 내 코드입니다 중간의 축소판에 수직 및 수평으로 가운데 버튼을 재생하고 싶습니다. 코드를 수정하는 방법?

.test { 
 
    width: 100%; 
 
    background: #f5f5f5; 
 
    border: 1px solid #e5e5e5; 
 
    position: relative; 
 
} 
 
.quick-img { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    max-width: 100%; 
 
} 
 
.kkk { 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 25%; 
 
    left: 45%; 
 
    font-size: 60px; 
 
    opacity: 0.6; 
 
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5); 
 
}

<script src="//cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-6 col-sm-12 "> 
 
      <div class="test"> 
 
       <a href="//google.com"> 
 
        <img class="quick-img" src="http://imgs.aixifan.com/content/2017_10_02/1509609180.png" /> 
 
        <button class="kkk glyphicon glyphicon-play"></button> 
 
       </a> 
 

 
       <h2 style=" word-break: break-all; 
 
     word-wrap: break-word;">title test</h2> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-6 col-sm-12 "> 
 
      <div class="test"> 
 
       <a href="//google.com"> 
 
        <img class="quick-img" src="http://imgs.aixifan.com/content/2017_10_02/1509609180.png" /> 
 
        <button class="kkk glyphicon glyphicon-play"></button> 
 
       </a> 
 

 
       <h2 style=" word-break: break-all; 
 
     word-wrap: break-word;">title test</h2> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-6 col-sm-12 "> 
 
      <div class="test"> 
 
       <a href="//google.com"> 
 
        <img class="quick-img" src="http://imgs.aixifan.com/content/2017_10_02/1509609180.png" /> 
 
        <button class="kkk glyphicon glyphicon-play"></button> 
 
       </a> 
 

 
       <h2 style=" word-break: break-all; 
 
     word-wrap: break-word;">title test</h2> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

HI 친구! 비디오리스트를 만들었습니다. 부트 스트랩 그리드 시스템을 사용하여 만듭니다. 이것은 내 코드입니다 중간의 축소판에 수직 및 수평으로 가운데 버튼을 재생하고 싶습니다. 코드를 수정하는 방법?

Answer 1

시도는 CSS이 추가 :

.test a { display: block; position: relative; } 

button.kkk { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

Answer 2

에 한번 당신의 CSS에 추가 :

.kkk 
{ 
    padding-top:50px; 
}