如何使用CSS将图片居中放置在其他元素内部（Blazor场景）

• 目标效果：
  
• 当前初始效果：
  

现有代码的核心问题是上传图标放在了MudPaper上传容器外部，且容器本身没有配置居中布局规则，导致图标无法在上传区域内居中显示。

实现步骤 #

1. 调整DOM结构，将上传图标移入MudPaper容器内部
2. 给MudPaper添加Flex布局类，实现内部元素水平、垂直双向居中，同时设置相对定位作为内部透明输入框的定位基准
3. 调整元素层级，保证透明的文件输入框覆盖整个容器、可正常点击/拖拽，上传图标、已选文件标签正常显示

修改后完整代码 #

<MudPaper 
    @ondragenter="@SetDragClass" 
    @ondragleave="@ClearDragClass" 
    @ondragend="@ClearDragClass" 
    Height="80%" 
    Outlined="true" 
    Class="@DragClass d-flex flex-column align-items-center justify-content-center position-relative pa-4"
>
    @* 无文件时显示上传图标 *@
    @if (fileNames.Count == 0)
    {
        <img style="width:100px; height:100px;" src="/images/png/upload.png" />
    }
    
    @* 透明文件输入框 覆盖整个容器 层级最高 *@
    <InputFile 
        OnChange="OnInputFileChanged" 
        class="absolute mud-width-full mud-height-full overflow-hidden z-3 cursor-pointer" 
        style="opacity:0;" 
    />

    @* 已选文件标签列表 *@
    <div class="d-flex flex-wrap gap-2 justify-content-center mt-3">
        @foreach(var filename in fileNames)
        {
            <MudChip 
                Color="Color.Primary" 
                Text="@filename" 
                Size="Size.Small" 
                OnClose="@(() => Closed(filename))"
            />
        }
    </div>
</MudPaper>

关键配置说明 #

• d-flex flex-column align-items-center justify-content-center：给容器开启弹性纵向布局，实现内部元素水平+垂直居中
• position-relative：修正内部绝对定位InputFile的定位基准，避免输入框偏移出上传容器
• pa-4：给容器添加内边距，避免内容贴边
• z-3：将透明输入框层级调到最上层，保证整个上传区域都能点击触发文件选择、响应拖拽事件
• 可选优化：添加fileNames.Count == 0判断，选中文件后自动隐藏上传图标，只显示已选文件列表，交互更符合常规上传组件逻辑

如果不想使用MudBlazor内置的工具类，也可以直接给容器加自定义样式实现相同效果，核心样式如下：

.upload-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

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