让div缩小后,还是居中

图片描述

图片描述
如图有一个超过容器的div,下方有一个滑块用于控制里面div的大小缩放,用的是css的缩放transform:scale,transform-origin:left

图片描述
现在的问题是,当div缩小到一定大小后,他不居中,右边会空出一大块,有什么办法可以让他始终居中...
因为原div是超过容器的宽度,用css缩小貌似宽度不会变化,所以用js貌似也不好弄,有木有大佬帮忙解决一下(这个是个vue的demo)

图片描述

这是不加transform-origin:left...更不居中更奇怪.

vue.js javascript css

阅读 5.7k

3 个回答

得票最新

Meathill

22.5k133642

发布于
2018-09-14

你的 CSS 里的 transform-origin: left 不就是没打算让它居中么？

Redux

18335

发布于
2018-09-14

你好，打开 DEMO 在控制台改变任意元素的宽高，都会是居中的，希望对你有帮助！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: red;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>