如何使用 Flexbox 使項目居中？

Question

我想用 flexbox 在我的代碼中居中。 它適用於所有其他元素，只是這里似乎有問題。 有人有想法嗎？

 .answer { text-shadow: 0 0 2px gr; display: flex; justify-content: center; border-radius: 5px; margin-bottom: 20px; padding: 20px; border: 5px solid black; border-radius: 5px; width: 50%; }

 <section class="answer"> <p>Answer</p> </section>

這就是它在我的實時服務器中的顯示方式

Answer 1

您的“答案”在方框中居中。 您是否要使框在頁面上居中？ 在這種情況下，您需要將 flex styles 應用於父級。 在這種情況下，正文：

 body { display: flex; justify-content: center; align-items: center; height: 100vh; }.answer { text-shadow: 0 0 2px gr; display: flex; justify-content: center; border-radius: 5px; margin-bottom: 20px; padding: 20px; border: 5px solid black; border-radius: 5px; width: 50%; }

 <section class="answer"> <p>Answer</p> </section>

Answer 2

您可以在 css 上添加body標簽以使頁面居中

使水平居中

body {
  display: flex,
  justify-content: center
}

或垂直居中

body {
  display: flex,
  align-items: center,
  height: 100vh /* This is for full height of your screen */
}

或使水平和垂直居中

body {
  display: flex,
  justify-content: center,
  align-items: center,
  height: 100vh
}

Answer 3

 body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0px; /*add to remove body margin which always present and makes v-scroll if not removed*/ }.answer { display: flex; justify-content: center; margin-bottom: 20px; /*Remove it if their is no other content on page*/ padding: 20px; border: 5px solid black; border-radius: 5px; width: 50%; }

 <section class="answer"> <p>Answer</p> </section>

Answer 4

請參閱 FlexBox 上的本指南，我認為它可以幫助您很多https://css-tricks.com/snippets/css/a-guide-to-flexbox/