fixed实现水平居中

页面如果需要实现类似Android的Toast这种消息提示,这就要求使用position:fixed

我们知道这种定位方式是通过lefttop等属性指定的,但定位的坐标点是<div>左上角,弹出内容本身的长度也不固定,直接来个left: 50%并不是我们想要的效果。那么如何实现水平居中呢?

CSS实现

一种方式是使用JavaScript来计算,但显然比较麻烦。最好的方式是使用CSS3的transform来实现。

.toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
}

上面代码中,我们的弹出信息左边缘在水平位置上偏移50%,在此基础上又减去了自身宽度的50%,恰好就是水平居中了。

一种错误的方式

以前写过一个典型的错误实现:用一个width:100%的透明空<div>作为position:fixed的区块,然后在其内部实现水平居中。

虽然乍一看能实现效果,但实际上空<div>把后面的元素都给遮挡了,这样显然是不行的。

作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap