如何在CSS中的页脚中心对齐文本？

Question

我有一个domain，其中我用HTML，CSS和Bootstrap 3创建了一个页面。

如果我们向下滚动页脚，我们可以将Footer文字放在中心，如下图所示（来自domain的页脚截图）。它的一点点。

我想知道我需要在现有的CSS代码中做出哪些更改，以便文本Footer完全位于中心。

我在页脚部分使用的CSS代码是：

    /**** Footer START ****/

    .footer {
        width: 100%;
        height: 12%;
        background-color: black;
        display: flex;
        align-items: center;
        background-size: 100% 100%;
        justify-content: center;
    }

    .footer p {
        color: white;
        font-size: 2.25em;
    }
/**** Footer FINISH ****/  

我使用了与Header相同的CSS代码，它的设计完美如下：

我同意in the actual snippets and in the fiddle as well, its working quite fine，但我不确定为什么它不适用于domain。

Answer 1

尝试使用此代码段，它正在运行。

如果你想垂直居中，那么尝试在容器中给出与高度匹配的行高。

.footer {
    width: 100%;
    height: 50px; 
    line-height: 50px;
    background-color: black;
    text-align: center;  
    background-size: 100% 100%;
    justify-content: center;
}

.footer p {
    color: white;
    font-size: 1.25em;
}

<div class="footer">
  <p>Footer</p>
 </div>

Answer 2

我不明白，但如果你想在中间从上到下：

footer{
  text-align: center;
  background: black;
  color:white;
  font-size: 1em;
  width: 100%;
  height: 40px;
  overflow: hidden;
}
footer>p{
  margin-top: calc(20px - 0.5em);
  height: auto;
}

<footer>
  <p>Text</p>
</footer>

Answer 3

看起来很有效......

.footer {
    width: 100%;
    height: 12%;
    background-color: black;
    display: flex;
    align-items: center;
    background-size: 100% 100%;
    justify-content: center;
    vertical-align: middle;
}

.footer p {
    color: white;
    font-size: 1.25em;
}

<div class="footer">
  <p>Footer</p>
 </div>