元素增加animation后，绝对定位居中失效解决办法

梦里梦外; 2022-12-03 09:09 347阅读 0赞

以下是绝对定位的垂直居中代码，但是加上animation后发现元素居然不居中了。（这里实现的是 loading 动画，可以放到 [run][] 上看看效果）

.container{
      width: 400px;
      height: 400px;
      background: #eee;
      position: relative;
    }
    .center{
      background: blue;
      position:absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); 
      height: 100px;
      width: 100px;
      border: 4px solid transparent;
      border-radius: 50%;
      background: tomato;
      border-right-color:gainsboro;
      animation: move 1s linear infinite;
    }
    
    @keyframes move {
        0% {
            transform: rotate(360deg)
        } 
        100% {
            transform: rotate(0deg)
        }
    }

经排查，失效的原因是因为 animation 中 transform 重写了元素样式  
**解决办法：**  
**在 帧 中重新定义 translate**

@keyframes move {
        0% {
            transform: translate(-50%, -50%) rotate(360deg)
        } 
        100% {
            transform: translate(-50%, -50%) rotate(0deg)
        }
    }

[run]: http://jsrun.net/new

发表评论取消回复

表情：

评论列表（有 0 条评论，347人围观）

还没有评论，来说两句吧...

相关阅读

相关绝对定位水平垂直居中（HTML、CSS）

绝对定位水平垂直居中（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

电玩女神/ 2023年10月03日 13:24/ 0 赞/ 24 阅读

相关绝对定位水平垂直居中

1.绝对定位水平垂直居中 <style> .box { position: absolute;

你的名字/ 2023年02月13日 14:57/ 0 赞/ 195 阅读

相关 css绝对定位之对齐居中版心内容

假如我想让一个盒子固定在我中部版心位置，应该怎么办呢？方法如下：没有定位之前，他们是普通的两个盒子，html代码如下： <!DOCTYPE html>

﹏ヽ暗。殇╰゛Y/ 2023年01月10日 14:58/ 0 赞/ 208 阅读

相关元素增加animation后，绝对定位居中失效解决办法

以下是绝对定位的垂直居中代码，但是加上animation后发现元素居然不居中了。（这里实现的是 loading 动画，可以放到 [run][] 上看看效果） .con

梦里梦外;/ 2022年12月03日 09:09/ 0 赞/ 348 阅读

相关元素垂直居中与hover失效

1. 垂直居中 1) position: absolute 2) left: 50%; margin-left: 负的元素一半宽度;

淩亂°似流年/ 2022年08月13日 12:36/ 0 赞/ 216 阅读

相关 css绝对定位后居中显示文字

在图片底部居中显示文字，直接上代码： <style> .main { width:300px; height:200px; text-align:center; }

比眉伴天荒/ 2022年06月13日 06:55/ 0 赞/ 331 阅读

相关【CSS】绝对定位元素的水平居中和垂直居中

居谁的中呢，相对于谁绝对定位，就是居谁的中了。若是水平居中的话，将该绝对定位的元素添加这个样式： left: 0; right: 0; margi

柔情只为你懂/ 2022年06月07日 11:39/ 0 赞/ 261 阅读

相关 css 通过绝对定位实现水平垂直居中

知识点： margin: auto; 效果图： ![70][] 代码： html: <div class="outer"> <div

r囧r小猫/ 2022年05月13日 11:40/ 0 赞/ 283 阅读

相关 css position: fixed; 垂直居中,绝对定位居中

.boxout{ background:fff; z-index: 111;===display:none; box-shadow: 0

缺乏、安全感/ 2021年09月26日 01:26/ 0 赞/ 535 阅读

相关【CSS】DIV浮动层绝对居中定位

下面的写法兼容IE系列浏览器和火狐浏览器。详细解说，直接看样式： #dingwei{padding:10px;background-color:#003300;co...

测试账号/ 2021年01月10日 05:46/ 0 赞/ 806 阅读