我無法將按鈕置於頁面中心

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>