问题

之前实现一个toast控件, 效果如下:

toast

代码见center aligned toast with top+transfrom

很简单, 水平居中用老办法就好了:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

但是有个问题, 让我不爽. 如下图:

问题

可以看到, 这里提前换行了, 其实不换行一行完全放得下的.

原因

那么为什么换行了呢? 因为我们的实现方法是:

1. 先top: 50%; left: 50%
2. 然后往回退水平竖直各50%.

其中第一步导致了提前换行. 我加个不transform的就一目了然了.

dummy-toast

其中右下角的那个是不加transform的, 可以看到换行是因为它碰到边界了.

解决方法

沿用这个套路的话, 没想到什么解决方法. 只能转用flex.

很简单:

display: flex;
justify-content: center;
align-items: center;

flex-toast还有个好处是可以给左右加margin, 让边缘不紧贴容器, 好看些. 代码见center aligned toast with flex

flex-toast