JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div>
        <a class="cm1">你好<br/>我是測試一二三四五</a>
    </div>
    <a class="container cm1">
        <div class="center-area">
            <div class="centered">
                你好<br/>我是測試一二三四五
            </div>
        </div>
    </a>
</body>

CSS

.cm1 {
    appearance: button;
    -webkit-appearance: button;
    text-decoration: none; font: menu; color: ButtonText;
    display: inline-block; padding: 20px 80px;
    min-height: 50px;
    margin-top:5px; 
    margin-left:15px; 
    margin-right:15px; 
    margin-bottom:15px;  
    text-align: center;
    border: 3px solid black;
}

.container {
    position: relative; /* so center-area can
                           be positioned absolute */
    border: 3px solid black;
  }
  .center-area {
    /* let it fill the whole container */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .center-area:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  .centered {
    display: inline-block;
    vertical-align: middle;
  }

JavaScript

$(function(){
    var html = $(".container.cm1").html();
    $(".container.cm1").html($(".centered").html());
    var width = $(".container.cm1").width();
    $(".container.cm1").html(html);    
    $(".container.cm1").width(width);
})