使用 div 元素将我的按钮居中

如何解决使用 div 元素将我的按钮居中

我无法将超大屏幕中的按钮居中。 我已经尝试了几种不同的解决方案，所有这些都取自这里提出的其他问题，但如果不将按钮放在单独的 div 中，我似乎无法让该死的东西居中。 如果这是我必须做的才能让它工作，那很好，但我宁愿没有额外的代码来保持文档更整洁。有什么建议吗？

.btn {
  width: 150px;
  margin: 30px 0px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZonixN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="row">
  <div class="col-12 col-md-m6 my-4">
    <h1 class="jumbotron-header">Welcome,bakers!</h1>
  </div>
  <div class="col-12 jumbotron-content">
    <p class="jumbotron-text col-12 col-lg-6">
      Days gone pie is the recipe site here to help you become the star baker of your own kitchen! Every recipe is provided by the community,so you kNow that each one has been tested and approved by friends and family all over the world! From beautiful breads
      to delicIoUs desserts. Colourful cakes to perfect pastry,there's a recipe here to suit every occasion. It doesn't matter if your a budding novice,or a skilled baker,days gone pie has something for everyone. So,why not sign up Now and start showcasing
      your baking talent!
    </p>
    <button class="btn btn-primary btn-lg btn-signup col-12"><strong>Sign Up</strong> 
                </button>
  </div>