body 之外的内容 - 我的 body 失控了

Question

希望你一切都好。

我正在使用 MaterializeCss 创建一个 <Form> 来计算工匠发票。用户应该键入一个数字或选择一个项目。到目前为止，还不错。

我需要把它全部居中，除了按钮，它们需要 space 之间。

只要我使用全屏 - 一切都很好。这是我的问题，我的 body 容器是我们的控制权。不知道为什么内容不居中...

我的代码：

#buttonarea {
    display: flex;
    justify-content: space-between;
}

h1 {
    font-size: 2rem;
}

.row {
    margin: 0;
}

.col {
    margin: 0;
}

.container {
    margin-left: 25%;
    margin-right: 25%;
}

<!DOCTYPE html>
<html>
  <head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- <div class="col s2">left              
            </div> -->
            <div class="col s12 center-align">
                <p><h1>Kostenrechner</h1></p>
                <p>Um die Kosten für dein Projekt einschätzen zu können, benötigen wir eineige Informationen von Dir. <br> Trage die Fläche in m² ein.</p>
              <div class="row center-align">
                <div class="col s12">
                  <div class="row">
                    <div class="input-field col s12">
                        <input id="areaToClean"  type="number">
                        <label for="areaToClean">Trage deine Fläche in m² ein.</label>
                      </div>
                  </div>
                </div>
              </div>                  
              <div class="row center-align">
                <div class="input-field col s12">
                    <p>
                        oder
                    </p>
                  </div>
              </div>                  
              <div class="row center-align">
                <div class="input-field col s12">
                    <select>
                      <option value="" disabled selected>Choose your option</option>
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                    </select>
                    <label>Materialize Select</label>
                  </div>
              </div><br><br>
              <div class="row">
                <div class="col s12" id="buttonarea">
                    <a class="waves-effect waves-light btn red"><i class="material-icons left">navigate_before</i>zurück</a>
                    <a class="waves-effect waves-light btn green"><i class="material-icons right">navigate_next</i>weiter</a>
                </div>
              </div>
              
              <div class="row center-align">
                  <div class="col s12">
                <ul class="pagination">                    
                    <li class="active"><a href="#!">1</a></li>
                    <li class="waves-effect"><a href="#!">2</a></li>
                    <li class="waves-effect"><a href="#!">3</a></li>
                    <li class="waves-effect"><a href="#!">4</a></li>
                    <li class="waves-effect"><a href="#!">5</a></li>                    
                  </ul>
              </div></div>
            </div>

          </div>
    </div>
    <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

Answer 1

我忘了样式：

body {
    display: flex;
}

body 之外的内容 - 我的 body 失控了

Content outside the body - My body is out of control

html

css

materialize