javascript - 我无法让我的按钮在我的页面上居中

Question

我尝试了很多不同的技巧，包括 display: block;, display: table; margin : 0 auto ；我真的不知道在这一点上还能尝试什么。这是整个 repl.it 的链接:

https://repl.it/@joshing_you/Fortnite-Battle-Royale-Quiz-App

这是具体的 javascript 代码片段:

function questionGenerator (score, multipleChoiceQues, completedQuestions) {
      return `
    <section class="question-section">
      <h3>${multipleChoiceQues.question}</h3>

      <form class="question-form">
        <fieldset>
          <label for="ans" class="choice">
            <input type="radio" name="option" required>
            <span>${multipleChoiceQues.answerOne}</span>
          </label>
          <br>
          <label for="ans" class="choice">
            <input type="radio" name="option">
            <span>${multipleChoiceQues.answerTwo}</span>
          </label>
          <br>
          <label for="ans" class="choice">
            <input type="radio" name="option">
            <span>${multipleChoiceQues.answerThree}</span>
          </label>
          <br>
          <label for="ans" class="choice">
            <input type="radio" name="option">
            <span>${multipleChoiceQues.answerFour}</span>
          </label>
          <br>
        </fieldset>
        <button class="answer-submit">SUBMIT</button>
      </form>
    </section>

    <section class="question-and-score">
      <span class="currentQuestion">Question: ${multipleChoiceQues.num}/10</span>
      <span class="currentScore">Score: ${score}/${completedQuestions}</span>
    </section>`;
    }

这是 CSS:

.answer-submit {
  position: absolute;
  bottom: 100px;
  align-items: center;
}

如有任何帮助，我们将不胜感激!

Answer 1

button{
display:block;
margin:0 auto;
}

<button>Hi! It's Worked.</button>

试试这个。希望对你有帮助。