Question

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

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

＆＃34;或登录您的帐号＆＃34; 的部分是我试图垂直居中的部分。

相关CSS：

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

Answer 1

你需要做两件事：

添加一个包装器（这将是绿色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 2

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

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

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%);
}

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

我选择了60％，-70％，因为我的屏幕左侧看起来居中，但是却搞乱了。这是我能找到的唯一方法，让它以与左侧欢迎文本相同的方式调整大小。

新代码：

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

翻译不在div上工作的财产

4 个答案: