翻译属性无法在 div 上工作

Question

我一直在尝试将特定 div 的水平和垂直居中，但我让垂直部分居中，而不是水平部分。

我正在使用 translate(-50%, -50%)，它应该以中心为中心，但不起作用...

说 "Or login to your acccount" 的部分是我试图垂直居中的部分。

相关CSS:

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

Answer 1

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

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

Answer 2

你需要做两件事：

添加一个包装器（这将是绿色的 div），让我们调用 login-wrap，并赋予它以下属性：

.login-wrap {
  float: left;
  height: 100%;
  position: relative;
  width: 40%;
}

在此处将 relative 更改为 absolute

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

Answer 3

转换正在运行。试试这个。您必须为所有浏览器定义转换样式。

.logindiv {

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

Answer 4

这是您的原始代码：

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

通过将位置更改为绝对位置，您可以使用转换移动 logindiv：translate()（先执行 X，然后执行 Y）

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

新代码：

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

翻译属性无法在 div 上工作

Translate property not working on div

html

css

css-transforms

翻译 属性 无法在 div 上工作

Translate property not working on div

html

css

css-transforms

翻译属性无法在 div 上工作