如何在ASP.NET Web窗体中垂直居中引导5吐司

Question

我在ASP.NET web表单中使用Bootstrap toast元素，如下所示：

<asp:Content ID="ctMain" ContentPlaceHolderID="cpMain" runat="server">
<div aria-live="polite" aria-atomic="true" class="mt-4 d-flex">
<div class="toast text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true" id="toastFail" data-bs-delay="2000" data-bs-autohide="true">
<div class="toast-header"><strong class="mr-auto">Toast Title</strong></div>
<div class="toast-body"><span id="spnErr" /></div>
</div> 
</div>
<section class="vh-50">
<!-- rest of page content -->
</section
</asp:Content>

在我的Javascript部分中，我这样称呼toast：$('#toastFail').toast('show');

吐司出现了，但我想做的是让吐司在页面中垂直居中，但我在Bootstrap文档中找不到任何关于如何做到这一点的内容。有人能帮我一下吗？谢谢

Answer 1

根据引导程序文档：

您还可以使用flexbox实用程序来对齐烤面包水平地和/或垂直地。

将div类修改为：

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

在使用这个class之前，请确保你的吐司周围有足够的空间。