Transformieren Versätze Eingangsrahmen in Chrome

Question

Ich machte eine Webseite und ich musste eine div mit einer input, in der Mitte der Seite horizontal und vertikal ausrichten. Aber als ich den Code getestet habe, habe ich etwas gemacht, was ich nicht erwartet habe.

body { 
 
    background: white; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: Source Sans Pro; 
 
    line-height: 160%; 
 
} 
 

 
div { 
 
    position: absolute; 
 
    background: #E6E6E6; 
 
    padding: 15px; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transform: translate(-50%, -50%); 
 
}

<div><input /></div>

Getestet habe ich es in Chrome und Firefox, aber dieser Fehler passiert nur in Chrome. Gibt es einen Grund dafür, und wie repariere ich es?

Answer 1

Das input Element wird standardmäßig gestylt mit einem inset Wert:

diesen Versuchen Sie stattdessen:

input { border: 1px solid gray; } 
 

 
body { 
 
    background: white; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: Source Sans Pro; 
 
    line-height: 160%; 
 
} 
 

 
div { 
 
    position: absolute; 
 
    background: #E6E6E6; 
 
    padding: 15px; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
}

<div><input /></div>