I'm trying to make my site look more visually pleasing and the dropdown bar is really messing it up, here's what it looks like right now:

jsfiddle

* {
  margin: 0;
  padding: 0;
}

#report_card {
  background-color: black;
  height: 5rem;
  padding-top: 1rem;
}

#report_name {
  display: block;
  margin: auto;
  padding: 0.5rem;
  width: 12rem;
  text-align: center;
}

<div id="report_card">
  <select id="report_name" align="center">
    <option>option 1</option>
    <option>option 2</option>
    <option>reaaaaaaaaalllllllyyyyyyyyyy long option 3</option>
  </select>
</div>

I was hoping there is solution that would ideally be close to either of these 2:

1. The dropdown is centered
   

2. The dropdown Text is centered with ellipsis
   

But I'm also open to other suggestions of making the dropdown menu more better looking and please o please try not to use JavaScript unless absolutely necessary, the ideal case would be a css based solution

Edit: I'm also not looking for custom made dropdown menus