如何将元素在图像上（垂直）居中？ [已关闭]

Question

我希望记分板垂直居中。我尝试了不同的方法，但它们就是行不通，可能是覆盖了 CSS 代码，但我不知道。 (https://i.sstatic.net/M6JCLCKp.png)

使用了100vh、100%语法，使用了其他容器div。尝试了边距，但它们只是扩展了页面。

body {
  margin: 0;
}

#container {
  height: 100vh!important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#scoreboard {
  font-family: "Kanit";
  color: white;
  height: 840px;
  width: 100%;
}

<div id="container">
  <div id="scoreboard">
    <div id="player1">
      <span id="data1">
                        <span id="seed1">
                            
                        </span>
      <span id="name1">
                            
                        </span>
      </span>
      <div id="serve1">

      </div>
      <span id="pts1">
                        
                    </span>
      <span id="set11">

                    </span>
      <span id="set12">
                        
                    </span>
      <span id="set13">
                        
                    </span>
    </div>
    <div id="player2">
      <span id="data2">
                        <span id="seed2">
                            
                        </span>
      <span id="name2">
                            
                        </span>
      </span>
      <div id="serve2">
        &nbsp;
      </div>
      <span id="pts2">
                        
                    </span>
      <span id="set21">

                    </span>
      <span id="set22">
                        
                    </span>
      <span id="set23">
                        
                    </span>
    </div>
  </div>

Answer 1

    body {
  margin: 0;
}

#container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#scoreboard {
  font-family: "Kanit";
  color: white;
  width: 100%; /* Remove fixed height */
  max-width: 600px; /*to prevent it from expanding too much */
}