上網查了一下,好像是說和瀏覽器渲染有問題,transform里的值不能設置成基數,但我這里擺明就不是奇數:
解決辦法
在使用 transform: translate3d(50%, 50%, 0)
時:
- 如果元素的高度可以固定,那么其值設置為偶數即可
- 如果元素的高度不可以固定,看看 translateY 是否可以設置為絕對單位(px)
- 如果上面兩者都不行,可以使用
display: flex; align-items: center
來做,缺點是多了一層父元素 - 如果第三條方法也不行,可以嘗試使用
display: table