你可以用它来居中一个按钮。

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="center">
  <button>Centered Button</button>
</div>

**Please try this code. I hope you can get right solution.**
**Change button css**
.btnQuiz{
 font-family: "Montserrat", sans-serif;
  background-color: #ffe31c;
  border-radius: 10px;
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  display: flex;
}

**To**
.btnQuiz{
  
 font-family: "Montserrat", sans-serif;
  background-color: #ffe31c;
  border-radius: 10px;
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  display: flex;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 75%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

 
 
     @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
    /* ---- Set up site grid ---- */

    @media (max-width: 600px) {
      .left, .right{
        width: 100%;
      }
    }

    * {
      margin: 0;
      padding: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }


    body {
      background: gray;
      font-family: "Montserrat", sans-serif;
    }





    main{
        grid-area: main;
        background: #272727;
        
        
        
    }


    footer{
        grid-area: footer;
        background-color: black;
        text-align: right;
        color: white;
    }



    h1.titleH1 {
        font-family: 'Montserrat', sans-serif;  
        font-size: 2.3vw;
        padding-left: 150px;
        margin: auto;
        color: white;
            
        /* -- Transform to vertically center heading */
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        
        }

    img.roundleft{
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        box-shadow: 1px 0px 10px #000;
        float: left;
    }



    /*--- Navigation Bar ---*/

    .wrapper{
      display: grid;
      grid-template-areas:
        'headerLeft headerRight';

      grid-template-columns: 600px 1fr;

      
              
    }

    .headerLeft{
      text-align: left;
      background-color: black;
    }

    .headerRight{
      text-align: right;
      background: linear-gradient(to left,#55524e, black);
    }

    .navMenu {
      margin-top: 30px;
      margin-right: 20px;
       
      
    }

    .navMenu a {
      color: #f6f4e6;
      text-decoration: none;
      font-size: 1vw;
      text-transform: uppercase;
      font-weight: 500;
      margin-left: 50px;
      margin-right: 50px;
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-i n-out;
    }

    .navMenu a:hover {
      color: #fddb3a;
    }


    /*---- Main Pages (Rows and Columns) ----*/

    .row{
      display: flex;

    }

    .column
    {
      height: 800px;
    }

    .left
    {
      background-color: black;
      width: 50%;
      float: left; 
      
    }

    .right{
      background: linear-gradient(to left,#55524e, #171716);
      width: 50%;
      float: left;
      
    }

    .homeImage{
      max-width: 100%;
      height: 800px;
     

    }

    h1.mainH1{
      color: white;
      font-size: 2.5vw;
      display: flex;
      justify-content: center;

      margin-top: 1em;

      

    }

    h2.mainH2{
      color: white;
      font-size: 2vw;
      font-family: "Montserrat", sans-serif;
      display: flex;
      justify-content: center;
      margin-top: 20px;

    }

    .listItems{
      color: white;
      font-size: 1vw;
      font-family: "Montserrat", sans-serif;
      display: flex;
      justify-content: center;
      

    }

    .btnQuiz{
      
     font-family: "Montserrat", sans-serif;
      background-color: #ffe31c;
      border-radius: 10px;
      border: none;
      color: black;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      display: flex;
      
     
       margin: 0;
      position: absolute;
      top: 50%;
      left: 75%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
     <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <main>
        <div class="row">

            <div class="column left"> <!-- Left -->
                
                <img class="homeImage" src="images/barbell.jpg" alt="Man lifting barbell"> 
            </div>

            <div class="column right"> <!-- Right -->
                <h1 class="mainH1">Welcome to the Fitness project</h1>
                    
                    <h2 class="mainH2">Here you can:<br></h2>
                    <br>
                    <ul>
                        <li class="listItems">Learn the fundementals to fitness as well as diet</li>
                        <br>
                        <li class="listItems">Take a quiz to optimise the information for your goals</li>
                        <br>
                        <li class="listItems">Expand your knowledge with usefull body building tips</li>
                    </ul>

                <button class="btnQuiz">Take Quiz</button>

                
                

            </div>

        </div>

        
    </main>



**Any doubt please comment to me.**

有两种简单的方法可以做到这一点：

方法一：

将以下css属性赋予列右类名：

.right {
  display: flex;
  justify-content: center;
  align-items: center;
}

Above将把div中所有的内容都放在classname为'column right'的中心

• 方法#2*

如果你只想让button居中，其他元素保持原样，那么用一个div容器 Package button，如下所示：

<div class='btn-wrapper'>
  <button class="btnQuiz">Take Quiz</button>
</div>

然后给予这个css给你的css中的btn-wrapper：

.btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

试试用

<center> <!-- button code here --> </center>

它是硬编码的，但工作得很好。