中心页脚内容垂直和水平，与页脚大小和标签数量无关

Question

我希望将id="footer-content"下的页脚中心所有内容始终保持水平和垂直居中，而不依赖于页脚大小和标记计数。如果更改页脚大小或添加/删除某些标记，则页脚内容必须保持水平和垂直中心。

 #footer {
      min-height: 100px;
      height: 100%;
      background-color: #f5f5f5;
      text-align: center;
      vertical-align: middle;
      border-style: dashed;
    }  

<footer id="footer">
  <div id="footer-content">
    <p>My text</p>
    <p>My text</p>
  </div>
</footer>

Answer 1

我不确定你在问什么，但是给它的孩子一个height，这个flexbox解决方案一定会起作用。水平和垂直：

#footer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 90px); <!--Arbitrary-->
  background-color: #f5f5f5;
  border-style: dashed;
}

如上所述，拥有height非常重要 - 否则垂直对齐将无效。您可以使用多个单位进行设置，例如px，vh，em等。