html中心垂直对齐不起作用答案

【问题标题】：html center align vertically not workinghtml中心垂直对齐不起作用
【发布时间】：2018-06-04 00:01:43
【问题描述】：

我在这里遇到了这个简单的问题，它以前在很多地方都有效。我正在尝试将 div 内的项目垂直并居中对齐。在这段代码中，margin-left 有效，但 margin top 没有，我尝试将其更改为更大的值，仍然没有任何效果。

.footer {
  background-color: #2E7FB6;
  color:white;
  height:50px;
}

<div class="footer">
    <section style="margin-left:15px; margin-top:10px;">FETCHED: {{ recordsFetched }} Work Order(s)</section>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

删除内联样式，使用带有flex-direction: column; justify-content: center; 和text-align center; 在页脚上的flexbox。

.footer {
  background-color: #2E7FB6;
  color:white;
  height:50px;
  text-align: center;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="footer">
    <section>FETCHED: {{ recordsFetched }} Work Order(s)</section>
</div>

【讨论】：

感谢@rpm192 的即时回复。

【解决方案2】：

@rprm192 说的使用 flexbox 技巧。但如果你想让它更简单并支持旧版浏览器，你可以使用line-height。这是给你的代码

.footer {
  height: 50px;
}
.footer section {
  height: 100%;
  line-height: 50px; //make it same as height value
}

【讨论】：

谢谢@Bariq，我知道了，谢谢你的加入。