Html 转换属性不在div上工作

我一直在尝试水平和垂直居中一个特定的

div

，我将垂直部分居中，而不是水平部分

我正在使用

translate（-50%，-50%）

，它应该以一个中心为中心，但不起作用

写着“或登录到您的帐户”的部分是我试图垂直居中的部分

相关CSS:

.logindiv{
位置：相对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

尝试为水平中心定位添加边距

.logindiv {
  margin-right: auto;
  margin-left: auto;
}

---

您需要做两件事：

• 添加包装（这将是绿色的

  div

  ），让我们调用

  登录包装

  ，并为其赋予以下属性：

.login wrap{
浮动：左；
身高：100%；
位置：相对位置；
宽度：40%；
}

• 将

  相对

  更改为

  绝对

.logindiv{
左：50%；
位置：绝对位置；
最高：50%；
转换：翻译（-50%，-50%）；
}

转换正在工作。试试这个。必须为所有浏览器定义变换样式

.logindiv {

    left: 50%;
    transform: translate(-23%, -38%);
    -ms-transform: translate(-23%, -38%); /* IE 9 */
    -webkit-transform: translate(-23%, -38%) /* safari*/
    width: 382px;
    position: relative;
}

---

这是您的原始代码：

.logindiv {
     position: relative;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}

通过将“位置”更改为“绝对”，可以使用transform:translate（）移动logindiv（先执行X，然后执行Y）

我选择了60%，-70%，因为在我的屏幕上，它看起来是以左为中心的，但却把它弄得一团糟。这是我能找到的唯一方法，让它以与左侧欢迎文本相同的方式调整大小

新代码：

.logindiv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(60%, -70%); 
}

---

啊，我甚至没想到要用包装纸！非常感谢！