在页面上水平和垂直对齐 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>