ASP.NET与HTML代码、CSS一致却显示异常，求解决方法

问题根源 #

1. 布局结构破坏：ASP.NET WebForms自动生成的<form runat="server">标签成为<body>的直接子元素，而原HTML中<body>的直接子元素是两个布局div。你给html, body设置了flex布局实现垂直水平居中，但form默认是块级元素，不会继承flex对齐规则，导致wrapper无法居中。
2. 多余嵌套层级：.aspx页面form内多了一层无样式的div，打乱了原布局的层级结构。
3. 资源路径问题：ASP.NET页面可能处于子命名空间/目录中，相对路径无法正确加载CSS和图片资源。

解决方案 #

1. 调整CSS适配form布局 #

修改CSS，让form元素参与flex布局，确保居中效果生效：

html, body {
    height: 100%;
    margin: 0;
    font-family: Verdana, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 让form占满body高度，避免布局截断 */
form#form1 {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.background-image {
    background-image: url("background-image.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    position: fixed;
    width: 100%;
    z-index: -1;
}

.wrapper {
    position: relative;
    background-color: white;
    padding: 50px 80px;
    height: 300px;
    border-radius: 20px;
}

img {
    display: block;
    margin: 0 auto;
    width: 150px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

2. 清理多余布局层级 #

删除.aspx页面form内的外层空div，还原与原HTML一致的结构：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Payment_Complete.aspx.cs" Inherits="RecipeHub.Payment_Complete_Page.Payment_Complete" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Payment Complete</title>
    <link rel="stylesheet" href="<%= ResolveUrl("~/Payment_Complete.css") %>">
</head>
<body>
    <form id="form1" runat="server">
        <div class="background-image"></div>
        <div class="wrapper">
            <asp:Image ID="Image1" runat="server" ImageUrl="~/tick2.png" />
            <h1>Payment Completed!</h1>
            <p>You're now a premium member!</p>
            <p>Ready to dive in for more recipe?&nbsp;<a href="url">Click Here</a></p>
        </div>
    </form>
</body>
</html>

3. 确保资源路径正确 #

使用ASP.NET的ResolveUrl方法或~根路径标记，确保CSS和图片资源能被正确加载：

• CSS引用改为<link rel="stylesheet" href="<%= ResolveUrl("~/Payment_Complete.css") %>">
• asp:Image的ImageUrl改为~/tick2.png（~代表网站根目录）

内容的提问来源于stack exchange，提问作者Mohammad Jilan