Übersetzen Eigenschaft funktioniert nicht auf Div

Question

Ich habe versucht, sowohl horizontal als auch vertikal eine bestimmte div zu zentrieren, und ich habe den vertikalen Teil zu zentrieren, nur nicht den horizontalen Teil.

Ich verwende translate(-50%, -50%), die in einem Zentrum Zentrierung werden sollte, aber nicht funktioniert ...

Der Teil, der sagt „Oder auf Ihre acccount anmelden“ ist der Teil, ich versuche, vertikal zentriert.

Link to the site

Relevante CSS:

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

Answer 1

benötigen Sie 2 Dinge zu tun:

• fügen Sie einen Wrapper (dies wird die grüne div sein), lassen Sie uns login-wrap nennen, und geben sie diese Eigenschaften:

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

• Änderung relative zu absolute hier

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

Answer 2

Versuchen Hinzufügen Margen für horizontale Mittel Positionierung

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

Answer 3

verwandeln funktioniert. Probier diese. Sie müssen Ihren Transformations-Stil für alle Browser definieren.

.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

Hier Ihr Original-Code ist:

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

Durch die Position der absoluten ändern, können Sie die logindiv bewegen mit der Transformation: translate() (das tut X zuerst, dann Y)

Ich wählte 60%, -70% wie das mit dem linken auf meinem Bildschirm zentriert schien, aber herumspielen damit. Dies war der einzige Weg, wie ich die Größe ändern konnte, so wie der Begrüßungstext auf der linken Seite.

Neuer Code:

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