水平和垂直的flexbox css不起作用[重复]答案

【问题标题】：Horizontally and vertically flexbox css not working [duplicate]水平和垂直的flexbox css不起作用[重复]
【发布时间】：2019-11-24 16:25:12
【问题描述】：

我试图将下面的 HTML 垂直和水平居中，但它不能垂直工作，只能水平工作。请有人帮忙解释为什么它不起作用？

<body>
    <header class="nav">
        <img class="icon" src="./img/eiffel-tower.svg" attr="Icon made by Monkik from www.flaticon.com">
        <a class="home-anchor" href="./index.html">Learn</a>
    </header>
        <div class="quiz-container">
            <p class="word-to-conjugate" id="randomWord"></p>
            <input type="text" id="userGuess">
            <button class="answer-button" id="checkAnswer">Answer</button>
        </div>
</body>

我的 CSS 使用 flexbox 尝试将测验水平和垂直居中

.quiz-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.word-to-conjugate {
    font-size: 2rem;
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
}

input {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    padding: 10px;
    font-size: 1.5rem;
    border: 1px solid #333;
    border-radius: 5px;
    margin-bottom: 20px;
}

.answer-button {
    background-color: #505FDF;
    font-size: 1.5rem;
    text-align: center;
    color: #FFFFFF;
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 3%;
}

【问题讨论】：

您能否提供一个可执行的示例并具体说明哪些不起作用？

标签： css flexbox

【解决方案1】：

那是因为你没有使测验容器垂直对齐。

请参见下面的示例，技巧是在您的测验元素周围添加一个包装器，使其垂直对齐。最后，一定要将html、body和包装元素的高度设置为100%；

html,
body,
.wrapper {
  height: 100%;
}

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

.quiz-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.word-to-conjugate {
    font-size: 2rem;
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
}

input {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    padding: 10px;
    font-size: 1.5rem;
    border: 1px solid #333;
    border-radius: 5px;
    margin-bottom: 20px;
}

.answer-button {
    background-color: #505FDF;
    font-size: 1.5rem;
    text-align: center;
    color: #FFFFFF;
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 3%;
}

<body>
    <header class="nav">
        <img class="icon" src="./img/eiffel-tower.svg" attr="Icon made by Monkik from www.flaticon.com">
        <a class="home-anchor" href="./index.html">Learn</a>
    </header>
      <div class="wrapper">
        <div class="quiz-container">
            <p class="word-to-conjugate" id="randomWord"></p>
            <input type="text" id="userGuess">
            <button class="answer-button" id="checkAnswer">Answer</button>
        </div>
      </div>
</body>

【讨论】：

对！谢谢，它现在正在工作。尽管使用我的导航，我将高度设置为 90%，否则它不会显示在中心，而是由于导航高度而进一步向下。
@SeanBoulanger - 您还可以将导航设置为position: absolute，并将height: 100% 保留在body、html 和包装元素上，以保持垂直对齐完全居中。您可能需要将 left:0; right:0; 添加到导航并指定其 height 以使其在屏幕顶部保持全宽。

【解决方案2】：

p、input、button 已经相对于它们的父对象居中：.quiz-container

也许您希望它相对于整个屏幕/视口居中。在这种情况下，您需要将html、body 和quiz-container 的min-height 设置为100%。

现在.quizcontainer 的高度为 100%，其子项将居中垂直和水平。

body, html{
  min-height: 100%; /*add this*/
}
 .quiz-container {
  min-height: 100%; /*add this*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.word-to-conjugate {
  font-size: 2rem;
  font-family: 'Source Sans Pro', sans-serif;
  text-align: center;
}

input {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  padding: 10px;
  font-size: 1.5rem;
  border: 1px solid #333;
  border-radius: 5px;
  margin-bottom: 20px;
}

.answer-button {
  background-color: #505FDF;
  font-size: 1.5rem;
  text-align: center;
  color: #FFFFFF;
  padding: 10px;
  border-radius: 5px;
  border: none;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 3%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <header class="nav">
      <img class="icon" src="./img/eiffel-tower.svg" attr="Icon made by Monkik from www.flaticon.com">
      <a class="home-anchor" href="./index.html">Learn</a>
  </header>
      <div class="quiz-container">
          <p class="word-to-conjugate" id="randomWord"></p>
          <input type="text" id="userGuess">
          <button class="answer-button" id="checkAnswer">Answer</button>
      </div>
</body>
</html>

【讨论】：