Центрировать кнопку в таблице

Question

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

.button a {
    padding: 8px 12px;
    border-radius: 4px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #ffffff; 
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    float: none;
    
    
}

<tr>
                                      <td class="plr-10" style="padding:0 60px;">
                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                          <tbody style=""><tr>
                                            <td style="padding-bottom: 10px;">
                                              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tbody><tr style="">
                                                  <td class="text-16 tx-grey" valign="top" width="10" style="font-family:'Segoe UI', Arial, sans-serif;font-size:16px;line-height:26px;text-align:left;min-width:auto !important;color:#929292;">
                                                    <strong style="font-weight: bold;">
                                                      <br>1.</strong>
                                                    </td>
                                                    <td class="img" width="10" style="font-size:0pt;line-height:0pt;text-align:left;"></td>
                                                    <td class="text-16" valign="top" style="color: rgb(37, 46, 93); font-family: &quot;Segoe UI&quot;, Arial, sans-serif; font-size: 16px; line-height: 26px; text-align: left; min-width: auto !important;"><br>
Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text .</td>
                                                    </tr>
                                                  </tbody></table>
                                                </td>
                                              </tr>
                                              
                                              
                                              
                                              
                  
                  <tbody><tr>
                  <td class="button a">
                      <table width="40%" border="0" cellspacing="0" cellpadding="0">
                        <tbody><tr>
                          <td class="button" style="padding-bottom:25px; text-align: center">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tbody><tr>
                              	<td class="button" width="240" style="font-family:'Segoe UI', Arial, sans-serif;font-size:12px;line-height:16px;min-width:auto !important;text-align:center;color:#ffffff;" bgcolor="#1b55f5" >
                                  <a href="" target="_blank" class="link-grey" style="color:#b5b5b5;text-decoration:none;"><span class="link-grey" style="color: #ffffff; text-decoration: none;">Browse</span></a>
                                </td>
                              </tr>
                            </tbody></table>
                          </td>
                        </tr>
                      </tbody></table>
                    </td>
                  </tr>

Answer 1

Это должно центрировать саму кнопку:

.button {
    display: flex;
    justify-content: center;
}

Answer 2

Попробуйте использовать фактическую кнопку:

<table style="width: 100%;">
    <tbody>
        <tr>
            <td style="text-align: center;">
                <button class="button">hello</button>
            </td>
        </tr>
    </tbody>
</table>