Question

我的页脚不会居中或在页面底部。它在页面的侧面或中间，干扰了我的其他内容。

CSS：

footer {
  background-color: transparent;
  margin-top: -0.5em;
  padding: 2em;
  position: absolute; 
}

HTML：

<footer>
  &copy; Copyright 2019. All Rights Reserved.<br>
  <a href ="mailto:kaijumydude@gmail.com">KaijuMyDude@gmail.com</a>
</footer>

Answer 1

footer {
  background-color: transparent;
  margin-top: -0.5em;
  padding: 2em;
  position: fixed; 
  left: 50%;
  transform:translateX(-50%);
  bottom: 0;

}


use `transfrom` and `left: 50%`

<footer>
  &copy; Copyright 2019. All Rights Reserved.<br>
  <a href ="mailto:kaijumydude@gmail.com">KaijuMyDude@gmail.com</a>
</footer>

Answer 2

一种解决方案是设置诸如body之类的flexbox父级，并沿垂直轴对齐项目。在此示例中，我添加了一个main元素，该元素使用flex-grow: 1占用了父容器中的最大可用空间。父级设置为min-height: 100vh，这意味着它至少与整个视口一样高。 footer然后会消耗剩余的空间。如果main的内容足够高，则footer会自然地向下推到页面上。

html,
body {
  margin: 0;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main,
footer {
  padding: 2em;
}

main {
  flex-grow: 1;
  background-color: salmon;
}

footer {
  background-color: transparent;
  text-align: center;
}

<main>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique debitis, repellat adipisci, id facere quia sequi dicta corrupti necessitatibus quibusdam non nihil tempora, ipsum, sint. Voluptate a harum illo, non.</p>
</main>
<footer>
  &copy; Copyright 2019. All Rights Reserved.<br>
  <a href="mailto:kaijumydude@gmail.com">KaijuMyDude@gmail.com</a>
</footer>

jsFiddle

Answer 3

footer {
  background-color: transparent;
  margin-top: -0.5em;
  padding: 2em;
  position: absolute; 
  text-align:center;
  width: 100%;
  }

<footer>
  &copy; Copyright 2019. All Rights Reserved.<br>
  <a href ="mailto:kaijumydude@gmail.com">KaijuMyDude@gmail.com</a>
</footer>

我希望这会为您提供解决方案。

如何使页脚位于页面底部并以html和css为中心？

3 个答案: