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

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>