如何使fixed元素动态居中

如何使fixed元素动态居中

最近实现一个网页端类似安卓的toast功能，要求可以同时显示多条提示，效果如下图：

百度搜了下，都不是我想要的结果，只好自己造轮子
还有一个需求，不能有大的div遮住网页内容，例如会导致toast的时候网页按钮无法点击
不多说了，放代码

<div class="fixed flex flex-col justify-center items-center w-0 h-0" style="top:50%;left:50%">
      <div class="bg-black bg-opacity-50 text-white shadow-md py-1 px-2 rounded my-1" >
        <span class="truncate">网络错误！</span>
        <span class="truncate">已加入肯德基豪华午餐</span>
        <span class="truncate">Hello world</span>
      </div>
</div>

用的tailwindCss，聪明的你可以根据class名判断css属性，truncate是防止换行