Eingangs oberen Rand verschwindet in den Fenstern chrom

Question

code

<div class="center"> 
    <div class="parent"> 
    <label>姓名</label> 
    <input type="text"> 
    </div> 
</div> 


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

.parent { 
    padding: 8px 0; 
} 
label { 
    margin-left: 20px; 
} 
input { 
    width: 100px; 
    height: 41px; 
} 

Ich möchte wissen, warum die obere Grenze des Eingangs disappears.I geschätzt würde, wenn mir jemand antwortet.

os: win10

Browser: chrom 51.0.2704.84m

Dank.

Answer 1

Das Problem tritt auf, weil transform: translate (-50%, -50%);

Sie Ihre CSS zu entfernen ändern

.center { 
    position: relative; 
    width: 100%; 
} 
.parent { 
    padding: 8px 0; 
    margin: 15% auto; 
    width: 100px; 
} 
label { 
    margin-left: 20px; 
} 
input { 
    width: 100px; 
    height: 41px; 
} 

Answer 2

verwandeln Dies ist eine grafische Glitch verursacht durch Ihr Element transformieren durch die Übersetzung auf einem Subpixel-gerendert wird (dh: 10.5px oder dergleichen).

Es gibt einige bekannte Lösungen dieses Problem zu beheben, obwohl ich nicht viel Glück mit ihnen hatte:

1) Verwenden Sie transform: transform: translate(-50%, -50%) perspective(1px);
2) auf dem übergeordneten Element hinzufügen.

.parent { 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 

Quelle: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Wenn Sie für ältere Browser keine Unterstützung benötigen, können Sie verwenden Flexbox: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/