javascript - CSS, HTML, Make div text remain on middle of its div regardless of text -

this question has answer here:

• how centre absolutely positioned content of unknown width? 3 answers

i have text in middle of webpage inside div tag, not yet on middle, need on middle default. there button there when click, text in middle change. problem that, when changed text, not centered anymore. want that, text should @ center regardless of text content.

$("#mybutton").on('click', function() {    $('#throbber_status_info').html('texxxxxxxxxxxxxt');  });

#throbber_status_info {    position: absolute;    color: black;    top: 53%;    left: 50%;    margin: 0px auto;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button id="mybutton">    click me  </button>  <div id="throbber_status_info" style="">text</div>

i prefer not have div absolutely positioned if need way try this:

#throbber_status_info {   color: black;   position: absolute;   left: 50%;   transform: translatex(-50%);   background-color: #dadada;   margin: 0px auto;   top: 53%;   text-align: center; } 

here's fiddle see in action.