CSS问题；调查表居中答案

【问题标题】：Problem with CSS; centering of survey formCSS问题；调查表居中
【发布时间】：2021-12-01 19:08:02
【问题描述】：

我需要在我的网站中居中放置一个调查表，但是当我尝试时，它不起作用。我不知道怎么了。有人可以帮帮我吗？

这是我的Pen。这是我的 CSS 代码：

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-white);
    margin: 0;
}

/* mobile friendly alternative to using background-attachment: fixed */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    background: var(--color-darkblue);
    background-image: linear-gradient(
        115deg,
        rgba(58, 58, 158, 0.8),
        rgba(136, 136, 206, 0.7)
    ),
    url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.container {
    width: 100%;
    margin: 3.125rem auto 0 auto;
}

【问题讨论】：

你为什么要绝对定位 body 元素？这样做会使 body 的宽度缩小到其内容所需的宽度。因此，您的表单在正文中居中 - 但您没有“看到”这一点，因为当两侧没有空间时“居中”当然毫无意义。
@Magda 如果以下答案之一对您来说足够清楚，请投票并验证答案

标签： html css forms center

【解决方案1】：

你可以在身上使用它

body {
  background-color: lightblue;
  font-family: Helvetica;
  font-size: 16px;
  flex: 0 1 auto;
  align-self: auto;
  width: 100%;
  text-align: center;
  
  
}

【讨论】：

【解决方案2】：

不建议直接使用body并设置样式。但我对你的代码做了一些调整，以继续让你直接使用body。

当您想要使元素居中时，请查看此内容以供参考。 https://css-tricks.com/centering-css-complete-guide/

*,
*::before,
*::after {
  box-sizing: border-box;
}

.wrapper {
  margin: 0 auto; // this centers bloc elements 
  text-align: center; // This centers inline elements
}

header {
  width: 100%; 
}

body {
  width: 100%; // just let your body take 100% of the page
  background-color: lightblue;
  font-family: Helvetica;
  font-size: 16px;
  position: absolute;
  flex: 0 1 auto;
  align-self: auto;
}

#survey-form {
  border: solid 2px;
  border-radius: 1%;
  padding: 20px;
  margin-top: 30px;
  background-color: lightpink;
  position: relative;
}

.form input {
  width: 100%;
  height: 30px;
}

.container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  //border: solid 2px #fff;
  max-width: 700px;
  margin: auto;
}

h1 {
  color: darkblue;
}

p {
  font-weight: bold;
}

form {
  text-align: left;
}

#dropdown {
  width: 100%;
  height: 30px;
}

.checkbox {
  display: flex;
  flex-direction: column;
}

#submit {
  height: 20px;
  width: 100%;
  background-color: #bbh77f;
  color: #000;
  padding: 0 20px;
  text-align: center;
  vertical-align: middle;
}

.input-textarea {
  min-height: 120px;
  width: 100%;
  margin-bottom: 15px;
  resize: vertical;
}

<!DOCTYPE html>
<html>

<head>
  <meta>
  <title>Formularz</title>
</head>

<body>
  <header>
    <div class='wrapper'>


      <h1 id="title">Formularz freeCodeCamp.org</h1>
      <p id="description">Dziękujemy za poświęcony czas i ulepszanie naszej platformy</p>
    </div>
  </header>
  <div class="container">
    <form id="survey-form">
      <div class="form box">
        <div>
          <label id="name-label" for="name"><p>Imię</p></label>
          <input id="name" type="text" required placeholder="Wpisz swoje imię" />
        </div>
        <div>
          <label id="email-label" for="mail"><p>E-mail</p></label>
          <input id="name" type="email" required placeholder="Wpisz swój e-mail" />
        </div>
        <div>
          <label id="number-label" for="number"><p>Wiek</p></label>
          <input type="number" min="10" max="99" placeholder="10">
        </div>
      </div>

      <div class="form-group">
        <p id="dropdown-label">Która opcja najlepiej Cię opisuje?</p>
        <select id="dropdown">
          <option disabled selected value>Wybierz swoją rolę</option>
          <option value="student">Student</option>
          <option value="full-time-job">Pełen etat</option>
          <option value="full-time-learner">Uczeń</option>
          <option value="prefer-not-to-say">Nie chcę mówić</option>
          <option value="other">Inne</option>
        </select>
      </div>

      <div class="form-radio">
        <p id="radio-label">Czy poleciłbyś freeCodeCamp znajomemu?</p>
        <div>
          <input type="radio" id="tak" name="polecenie" value="tak" checked>
          <label for="tak">Tak</label>
        </div>

        <div>
          <input type="radio" id="nie" name="polecenie" value="nie">
          <label for="nie">Nie</label>
        </div>

        <div>
          <input type="radio" id="nie-wiem" name="polecenie" value="nie-wiem">
          <label for="nie-wiem">Nie wiem</label>
        </div>


      </div>

      <div class="form-group">
        <p id="dropdown-label">Jaka część freeCodeCamp jest Twoją ulubioną?</p>
        <select id="dropdown">
          <option disabled selected value>Wybierz opcję</option>
          <option value="challenges">Challenges</option>
          <option value="projects">Projects</option>
          <option value="community">Community</option>
          <option value="open-source">Open source</option>
        </select>
      </div>

      <div class="form-group checkbox">
        <p>Co chcesz ulepszyć?</p>
        <div>
          <input type="checkbox">
          <label>Front-end Projects</label>
        </div>
        <div>
          <input type="checkbox">
          <label>Back-end Projects</label>
        </div>
        <div>
          <input type="checkbox" checked>
          <label>Data Visualization</label>
        </div>
        <div>
          <input type="checkbox">
          <label>Challenges</label>
        </div>
        <div>
          <input type="checkbox">
          <label>Open Source Community</label>
        </div>
        <div>
          <input type="checkbox">
          <label>Gitter help rooms</label>
        </div>
        <div>
          <input type="checkbox">
          <label>Videos</label></div>
        <div>
          <input type="checkbox">
          <label>City Meetups</label></div>
        <div>
          <input type="checkbox">
          <label>Wiki</label>
        </div>
        <div>
          <input type="checkbox">
          <label>Forum</label>
        </div>
        <div>
          <input type="checkbox">
          <label>Additional Courses</label>
        </div>

      </div>

      <div class="form-group">
        <p>Masz sugestie lub podpowiedzi? </p>
        <div class="textarea container input-textarea">
          <textarea rows="8" placeholder="Wprowadź swoją opinię tutaj"></textarea>
        </div>
        <button id="submit">Wyślij</button>

      </div>
  </div>
  </form>
  </div>
  </div>
</body>

</html>

【讨论】：