在页面上水平和垂直对齐组对齐组

Question

我有一个简单的网页，显示当前日期和时间以及4个参数，其中包含几个div中的名称和值。

现在我的尝试看起来像这样：

.outer {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner {
    border: 1px solid black;
    width: auto;
    padding: 5px;
}

#output {
 font-size: larger;
 display: flex;
 justify-content: center;
 align-items: center;
 color: blue;
 padding: 5px;
}

<div id="output">Today: current DateTime value</div>
<div class="outer">
  <div class="inner">Parameter 1:</div>
  <div class="inner" id="N">par 1 value</div>
  <div class="inner">Parameter 2:</div>
  <div class="inner" id="V">par 2 value</div>
</div>
<div class="outer">
  <div class="inner">Parameter 3:</div>
  <div class="inner" id="D">par 3 value</div>
  <div class="inner">Parameter 4:</div>
  <div class="inner" id="T">par 4 value</div>
</div>

JSFiddle example.

如何在页面上水平和垂直对齐此“表格”，因为此页面将显示在大屏幕上（可能是电视）？

Answer 1

我希望这会以某种方式帮助你

.outer {
  
    display: flex;
    width: 100%;
}

.main-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    }

.inner {
    border: 1px solid black;
    width: auto;
    padding: 5px;
    flex: 1;
}

#output {
 font-size: larger;
 display: flex;
 justify-content: center;
 align-items: center;
 color: blue;
 padding: 5px;
}

<div id="output">Today: current DateTime value</div>
<div class="main-div">
<div class="outer">
  <div class="inner">Parameter 1 sd sdf sdf 34 43 ewr  :</div>
  <div class="inner" id="N">par 1 value</div>
  <div class="inner">Parameter 2:</div>
  <div class="inner" id="V">par 2 value</div>
</div>
<div class="outer">
  <div class="inner">Parameter 3:</div>
  <div class="inner" id="D">par 3 value</div>
  <div class="inner">Parameter 4:</div>
  <div class="inner" id="T">par 4 value</div>
</div>
</div>