垂直对齐 fixed div 内的文本

Question

我正在尝试对齐页脚中的单行文本。页脚 div 是固定的，宽度为 100%。我确实回答了很多问题，但 none 似乎对我的特定设置有所帮助。到目前为止，最有希望的答案是使用转换和翻译，但我只能让它 75% 居中。这是代码：

  <footer>
    
    <div class="footer">
      <p>Website made in 2022. Copyright Test Site</p>
    </div>
    
  </footer>

.footer {
  background-color: var(--primary-color);
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8vh;
  border: 1px solid blue;
}

.footer p {
  font-family: 'Staatliches', cursive;
  color: var(--text-color);
  text-align: center;
}

考虑到我可能需要在稍后阶段添加一些社交图标，然后它们也应该在文本下方居中，因此居中文本的最佳方式是什么。

TIA

Answer 1

这应该适合你....

.footer p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Answer 2

.footer {
line-height:8vh;

} 尝试将 line-height 设置为等于框的高度以使文本垂直居中

Answer 3

嗨！将这些 CSS 属性添加到您的父元素，您元素中的所有内容都将居中：

.footer {
  /* Your code... */

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

Answer 4

在.footer p中编写的代码适用于元素居中：

.footer {
  background-color: seagreen;
  height: 100vh;
  position: relative;
}

.footer p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="footer">
  <p>Website made in 2022. Copyright Test Site</p>
</div>

看这里：https://www.w3schools.com/css/tryit.asp?filename=trycss_align_transform

垂直对齐 fixed div 内的文本

Vertically align text inside fixed div

html

css

centering