如何使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是防止换行