Question

我正试图从横向和纵向移动我的分区中心，但它不起作用。这是我的代码

<body>
    <div class="main"></div>
</body>

和css代码

.main{
    width: 100px;
    height: 100px;
    background-color: red;
    transform: translate(50% ,50%);
}

Answer 1

默认情况下，每个元素都是静态的，这意味着您无法移动它们。因此，请将此添加到您的规则中。

position: relative;

所以你可以移动它

点击HERE了解有关position

的更多信息

Answer 2

试试这个..

使用transform: translate();时，您应该使用position: absolute;元素。

position: absolute
right: 50%;
bottom: 50%;
transform: translate(50%,50%);

codepen

Answer 3

我相信要完成这个技巧你需要绝对定位和50％的上/下值。

＆＃13;

.main{
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%; 
}

＆＃13;

<body>
    <div class="main"></div>
</body>

＆＃13;

如何使用transform从横向和纵向移动元素中心：translate

3 个答案: