How Do I Center the Facebook Login Button?

I'm just trying to do a simple test and center the facebook button. My initial thought is I just need to center the div tag. However, I've tried everything I can think of like text-align, using css margin: auto, nothing seems to be working.

How do I center the facebook login button to the center of my html page?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
</head>
<body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=x";
  fjs.parentNode.insertBefore(js, fjs);
  }
  (document, 'script', 'facebook-jssdk'));
</script>

<div class="fb-login-button" data-max-rows="1" 
   data-size="large" data-button-type="continue_with" data-show-faces="false" 
   data-auto-logout-link="false" data-use-continue-as="false">
</div>

</body>
</html>

edit: added screenshot