如何在_Layout.cshtml页面添加居中白色圆角容器？

我在_Layout.cshtml页面中有以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - FeeCalc</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/FeeCalc.styles.css" asp-append-version="true" />
</head>
<body style="background-color:cadetblue">
    <header>
        <nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; ">
            <div class="container-fluid">
                <span class="navbar-brand" style="display:flex;">
                    <a href="https://www.google.com/">
                        <img src="~/Img/Infoorange.png" alt="ACR" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
        
                    </a>
                    <span style="font-size:25px;color:white;"><span style="color:#e9c46a">SpringField</span><br />company Name</span>

                </span>
      
            </div>
        </nav>
    </header>
    <div class="container-bg">
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    </div>

当前页面背景为灰蓝色，我想要添加一个居中的白色圆角容器用于放置HTML控件，但尝试以下代码后页面无任何变化，容器未显示：

<div style="margin-top: 70px;position:relative;top:50px">
        <div  style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%;" class="container"   >
  <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    </div>

请问如何在该页面中实现居中白色圆角容器？

解决方法 #

直接修改_Layout.cshtml中的容器结构，结合Bootstrap布局类和自定义样式实现需求，修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - FeeCalc</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/FeeCalc.styles.css" asp-append-version="true" />
</head>
<body style="background-color:cadetblue; padding-top: 100px;">
    <header>
        <nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; ">
            <div class="container-fluid">
                <span class="navbar-brand" style="display:flex;">
                    <a href="https://www.google.com/">
                        <img src="~/Img/Infoorange.png" alt="ACR" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
        
                    </a>
                    <span style="font-size:25px;color:white;"><span style="color:#e9c46a">SpringField</span><br />company Name</span>

                </span>
      
            </div>
        </nav>
    </header>
    <!-- 居中白色圆角容器 -->
    <div class="container mx-auto" style="max-width: 90%;">
        <div style="background-color: white; border-radius: 10px; padding: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
            <main role="main" class="pb-3">
                @RenderBody()
            </main>
        </div>
    </div>
</body>
</html>

关键修改说明 #

• 给<body>添加padding-top: 100px;，避开绝对定位的导航栏（导航栏高度约80px，留20px间距）
• 使用Bootstrap的container mx-auto实现容器水平居中，通过max-width: 90%;控制容器最大宽度（可根据需求调整）
• 白色容器添加padding: 2rem;避免内容贴边，box-shadow增加层次感（可选）
• 移除原有的无效容器结构，确保@RenderBody()完全包裹在白色圆角容器内

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