如何在数据文本与按钮间添加间距并实现页面居中布局？

首先修正代码里的结构错误，再通过CSS实现间距控制和文本居中效果。以下是修复后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
            padding: 2rem;
            box-sizing: border-box;
        }

        h1 {
            text-align: center;
        }

        /* 按钮容器：控制按钮与倒计时的间距 */
        .back-home-wrap {
            text-align: center;
            margin-bottom: 3rem; /* 可按需调整间距大小 */
        }

        .back-home-btn {
            background-color: blue;
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            cursor: pointer;
            font-size: 1rem;
            border-radius: 4px;
        }

        /* 倒计时文本：居中显示+样式优化 */
        #demo {
            text-align: center;
            font-size: 1.2rem;
            margin-top: 0;
            text-decoration: 2px solid powderblue underline;
        }
    </style>
</head>
<body>
    <h1>Whats Next?</h1>

    <div class="back-home-wrap">
        <a href="Hello World Website.html" target="_blank">
            <button class="back-home-btn">Back To Home</button>
        </a>
    </div>

    <p id="demo"></p>

    <script>
        var countDownDate = new Date("Apr 2, 2024 6:00:00").getTime();
        
        var x = setInterval(function() {
            var now = new Date().getTime();
            var distance = countDownDate - now;
            
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
            
            document.getElementById("demo").innerHTML = `${days} Days ${hours} Hours ${minutes} Min ${seconds} Sec`;
            
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("demo").innerHTML = "NOW";
            }
        }, 1000);
    </script>
</body>
</html>

关键修改说明： #

1. 修复HTML结构问题：移除重复的<head>、<body>标签，将<meta>移到正确位置，删除无用的{}包裹。
2. 添加间距：给按钮外层容器.back-home-wrap设置margin-bottom，精准控制按钮与倒计时文本的垂直距离。
3. 实现居中：给#demo和<h1>都设置text-align: center;，保持页面视觉统一。
4. 优化样式管理：将所有CSS集中在<head>内，用类名控制元素样式，避免内联样式和重复定义，便于后续调整。

内容的提问来源于stack exchange，提问作者David Humphrey