我正在使用 Bootstrap 5 创建 404 页面，但我无法将 404 错误消息置于页面中央而不导致页脚出现问题。例如，当视口较小时，页脚最终会覆盖部分 404 错误消息。
注意：您应该在整个页面上打开代码片段，以便更好地了解 404 页面当前的样子
/* body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serrif;
min-height: 100vh;
} */
#error-message {
text-align: center;
position: absolute;
top:50%;
transform: translateY(-50%);
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
}
footer p {
padding-top: 8px !important;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
footer h4 {
min-height: 56px;
}
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404 | </title>
<link rel="stylesheet" href="./css/404.css">
<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link
rel="stylesheet"
data-purpose="Layout StyleSheet"
title="Default"
disabled
href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
>
<link
rel="stylesheet"
data-purpose="Layout StyleSheet"
title="Web Awesome"
href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
>
<link rel="icon" type="image/x-icon" href="/Bootstrap-Technovine/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- 404 CONTENT START -->
<div class="container"id="error-message">
<h2>Oops! Page not Found</h2>
<h1>404</h1>
<p>Sorry, we can't find the page you are looking for.</p>
<p>If you clicked a link on our site and were deirected to this page please contact us so we can fix the problem.</p>
<a href="./index.html">Go back home</a>
</div>
<!-- 404 CONTENT CLOSE -->
<!-- FOOTER SECTION START -->
<footer class="bg-dark text-white" id="footer">
<div class="container">
<div class="row mb-2">
<div class="col-md-3 mt-5">
<h4>About Us</h4>
<hr />
<p>We are skilled IT professionals who specialize in solving a range of problems that our clients may face in the realm of IT.
</p>
<!-- FACEBOOK SECTION -->
<a href="">
<i class="fa-brands fa-facebook fa-2x"></i>
</a>
<!-- INSTAGRAM SECTION -->
<a href="">
<i class="fa-brands fa-instagram fa-2x"></i>
</a>
<!-- TWITTER SECTION -->
<a href="">
<i class="fa-brands fa-twitter fa-2x"></i>
<!-- LINKEDIN SECTION -->
</a>
<!-- <a href="#">
<i class="fa-brands fa-linkedin fa-2x"></i>
</a> -->
<!-- WHATSAPP SECTION -->
<!-- <a href="#">
<i class="fa-brands fa-whatsapp fa-2x"></i>
</a> -->
</div>
<div class="col-md-3 mt-5">
<h4>Quick Links</h4>
<hr />
<ul class="navbar-nav">
<li class="nav-item"><a href="/index.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="/services.html" class="nav-link">Services</a> </li>
<li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a> </li>
</ul>
</div>
<div class="col-md-3 mt-5">
<h4>Privacy and Terms</h4>
<hr />
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Privacy Policy</a></li>
<li class="nav-item"><a href="#" class="nav-link">Terms & Coniditions</a></li>
<li class="nav-item"><a href="#" class="nav-link">API Documentation</a> </li>
</ul>
</div>
<div class="col-md-3 mt-5">
<h4>Contact Info</h4>
<hr />
<p class="text-white">
city, state 12345 <br />
Call Us Now 123-456-7890 <br />
</p>
</div>
</div>
</div>
<div class="bg-dark text-white text-center py-4" id="copyright">
Copyright © 2023 . All Rights Reserved.
</div>
</footer>
<!-- FOOTER SECTION CLOSE -->
</body>
</html>#error-message {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
}
footer p {
padding-top: 8px !important;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
footer h4 {
min-height: 56px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404 | </title>
<link rel="stylesheet" href="./css/404.css">
<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" data-purpose="Layout StyleSheet" title="Default" disabled href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d">
<link rel="stylesheet" data-purpose="Layout StyleSheet" title="Web Awesome" href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d">
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css">
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css">
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css">
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css">
<link rel="icon" type="image/x-icon" href="/Bootstrap-Technovine/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- 404 CONTENT START -->
<div class="container" id="error-message">
<h2>Oops! Page not Found</h2>
<h1>404</h1>
<p>Sorry, we can't find the page you are looking for.</p>
<p>If you clicked a link on our site and were deirected to this page please contact us so we can fix the problem.</p>
<a href="./index.html">Go back home</a>
</div>
<!-- 404 CONTENT CLOSE -->
<!-- FOOTER SECTION START -->
<footer class="bg-dark text-white" id="footer">
<div class="container">
<div class="row mb-2">
<div class="col-md-3 mt-5">
<h4>About Us</h4>
<hr />
<p>We are skilled IT professionals who specialize in solving a range of problems that our clients may face in the realm of IT.
</p>
<!-- FACEBOOK SECTION -->
<a href="">
<i class="fa-brands fa-facebook fa-2x"></i>
</a>
<!-- INSTAGRAM SECTION -->
<a href="">
<i class="fa-brands fa-instagram fa-2x"></i>
</a>
<!-- TWITTER SECTION -->
<a href="">
<i class="fa-brands fa-twitter fa-2x"></i>
<!-- LINKEDIN SECTION -->
</a>
<!-- <a href="#">
<i class="fa-brands fa-linkedin fa-2x"></i>
</a> -->
<!-- WHATSAPP SECTION -->
<!-- <a href="#">
<i class="fa-brands fa-whatsapp fa-2x"></i>
</a> -->
</div>
<div class="col-md-3 mt-5">
<h4>Quick Links</h4>
<hr />
<ul class="navbar-nav">
<li class="nav-item"><a href="/index.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="/services.html" class="nav-link">Services</a> </li>
<li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a> </li>
</ul>
</div>
<div class="col-md-3 mt-5">
<h4>Privacy and Terms</h4>
<hr />
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Privacy Policy</a></li>
<li class="nav-item"><a href="#" class="nav-link">Terms & Coniditions</a></li>
<li class="nav-item"><a href="#" class="nav-link">API Documentation</a> </li>
</ul>
</div>
<div class="col-md-3 mt-5">
<h4>Contact Info</h4>
<hr />
<p class="text-white">
city, state 12345 <br /> Call Us Now 123-456-7890 <br />
</p>
</div>
</div>
</div>
<div class="bg-dark text-white text-center py-4" id="copyright">
Copyright © 2023 . All Rights Reserved.
</div>
</footer>
<!-- FOOTER SECTION CLOSE -->
</body>
</html>我没有更改您的 HTML，但对 CSS 做了一些小更改。希望有帮助。