How do I centrally align this div inside its parent div?

Question

Apologies in advance as I'm sure I'm missing something super obvious here, but I cant seem to get this button text to centrally align within its parent div.

I've been trying to assess the situation by using a background color on the inner div but this hasn't resulted in much luck. I've prowled the internet looking for answers but none of the solutions I've found have seemed to work for this.

Anyone able to help?

Here's how it looks with the code below with the arrow image: enter image description here

#button {
  width: 300px;
  height: 60px;
  background: lightcoral;
}

#buttoncontents {
  display: inline-block;
  background: lightgreen;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

#buttontext {
  display: inline-block;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 30px;
  line-height: 0px;
  color: #eeeeee;
}

#arrow {
  height: 30%;
  display: inline-block;
}

<div id="button">
  <div id="buttoncontents">
    <h3 id="buttontext">Shop now&nbsp;</h3> <img id=arrow src="arrow.png">
  </div>
</div>

Answer 1

position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); The code below is used to center an element in it relative parent element.

#button {
  width: 300px;
  height: 60px;
  background: lightcoral;
  position: relative;
}

#buttoncontents {
  display: inline-block;
  background: lightgreen;
  height: inherit;
  /*The code below is used to center an element in it parent element. 
  Just make sure that the parent element has position set to relative*/
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#button {
  width: 300px;
  height: 60px;
  background: lightcoral;
  position: relative;
}

#buttoncontents {
  display: inline-block;
  background: lightgreen;
  height: inherit;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

Answer 2

Try removing display:inline-block;

#buttoncontents {
    display: block;
    background: lightgreen;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}