Держите центр div внутри другого div

Question

Я пытаюсь центрировать наклон div class="opa" с помощью кнопки без забот по высоте или ширине div class="hello", потому что шаблоны имеют разные размеры.

Я пытался с left:50% , top 50%, position:absolute;, но я не могу достичь центра кнопки.

Это мой код:

.cosa { 
 
    display: none; 
 
    position: absolute; 
 
} 
 
.hello:hover .cosa { 
 
    display: block; 
 
} 
 

 
.canceled { 
 
    background-color: #3F3736; 
 
    padding: 10px 20px; 
 
    font-size: 15px!important; 
 
    color: #fff; 
 
    margin-left: 280px!important; 
 
    width: 210px; 
 
    margin-top: 25px!important; 
 
    font-weight: 70!important; 
 
}

<div class="hello"> 
 
     <div class="opa"> 
 
     <span id="cancel" class="pull-right canceled cprev previews cosa" ng-click="editing(); addDataSign();"><button type="button">CHANGE TEMPLATE</button></span></div> 
 
    <div class="tdescrip ng-pristine ng-untouched ng-valid ng-binding" ng-model="opened.HTML" editor="" data-ng-bind-html="opened.template">   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  <title>Template signature</title>    <table cellpadding="0" cellspacing="0" border="0" style="font-size:11px; font-family: Arial; line-height: 17px;" width="100%">   <tbody><tr>    <td valign="top" style="background-color:#f6f7f8; padding: 10px; border-right-width:2px; border-right-style: solid; border-right-color:#ff7f00 " width="50%">     <span style="font-size:13px; color:#29363f; font-weight: bold ">XXXXX</span><br><br>     XXXXXXXXXX<br>     mobile: XXXXXXXXXXX<br>     <span style="color:#009ee0"></span>    </td>    <td valign="top" style="background-color:#d1d7db; padding: 10px; padding-left: 20px" width="50%">     <span style="font-size:13px; color:#29363f ;font-weight: bold"></span><br><br>     XXXXXXX<br>          <span style="color:#009ee0"></span>    </td>   </tr>   <tr>    <td colspan="2">     <p style="font-size:8px; font-family:Verdana; color:#959595; line-height: 10px;"></p>    </td>   </tr>  </tbody></table> </div> 
 
     </div>

Answer 1

.hello { 
    position: relative; 
} 
.opa { 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
     -ms-transform: translate(-50%, -50%); 
      transform: translate(-50%, -50%); 
    position: absolute; 
}