我无法将按钮置于页面中心

Question

我尝试了很多不同的技巧，包括display：block ;、 display：table; 保证金：0自动; 我真的不知道在这一点上还有什么尝试。 这是整个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> 

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

Answer 2

默认情况下，按钮是内联元素（ inline-block ），这就是为什么margin: 0 auto不起作用； 以及为什么将按钮的display设置为block时它仍然起作用。

但是，这可能会有潜在的不良影响（即，元素将填充容器的宽度）。

最好的选择是将按钮简单地包装在div中，然后应用text-align: center; 到该div ：

 .buttons { text-align: center; } 

 <div class="buttons"> <button class="answer-submit">SUBMIT</button> </div> 

Answer 3

您还可以使用margin: 0 auto; 与绝对定位的项目。 设置您的左右为0；

.answer-submit {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100px;
}

 .answer-submit { position: absolute; left: 0; right: 0; margin: 0 auto; width: 100px; } 

 <button class='answer-submit'>Click</button>