Centering "coded" button in code block

Hi. I have created a button with a hover dropdown but now I want to center the button in the code block. Does anyone know how to center a coded code in a code block...

Thanks, 

These are my codes: (CSS and HTML)

(CSS) -

/* drop down button */

.dropbtn {
  width: 310px;
  background-color: #234b2a;
  color: white;
  padding: 16px;
  font-size: 16px;
  border-color: white;
  border-width: 5px;
  border-style: solid;
  
  cursor: pointer;
  box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.2);
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 300px;
  padding: 5px;
  box-shadow: 3px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #89c23f;
 
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #324d20;
}

/* end */

(HTML) - 

<div class="dropdown">
 <button class="dropbtn">Tree Removel</button>
  <div class="dropdown-content">
<p>Reasons to Consider Tree Removal</p>
    <ul style="text-align:justice;"> 
      <li>Diseased</li>
      <li>Hazardous</li>
      <li>Damaging to surrounding areas</li>
      <li>Dead</li>
    </ul>
    <a href ="/tree-removal">Learn More</a>
  </div>
</div>

Thanks,