Mit css übersetzen -50% auf div Zentrum nicht für Firefox gespeicherten details pop-up

Ich habe mit der folgenden css-Zentrum ein div auf dem Bildschirm (keine Feste Breite oder Höhe, so nicht verwenden kann, definiert die pixel-Breite und Höhe und negativen Margen).

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

Ich habe gerade gemerkt, dass, wenn Sie gespeichert haben, Ihre Daten für ein Formular in Firefox, und dann versuchen Sie, füllen Sie das Formular innerhalb meiner div-Element, das pop-up von Firefox erstellt, enthält Ihre gespeicherten Daten ignoriert das verwandeln, und erscheinen in der Position auf dem Bildschirm, wo die ganzen div-wäre-wenn-transform: translate war nicht angewendet.

Es ist schwierig, ein Beispiel zu geben, dies, weil es erfordert, dass Sie gespeichert haben, werden Ihre login-Daten einer Website, aber wenn Sie gehen zu einer Website, wo Sie gespeichert haben, details, und den container verschieben mit transform: translate, wirst du den Effekt sehen.

Gibt es eine Möglichkeit zu zwingen, Firefox pop-up, um auf die Transformation? Oder muss ich einen anderen Weg finden zentrieren eines div-Bildschirm?

kann man teilen, html-Seite oder auch vielleicht link, wenn möglich. dieses n ist nicht genug, um zu verstehen-Problem. Für jetzt vielleicht -moz-transform: translate(-50%, -50%); helfen 🙂
Ich habe schon versucht :). Ich kann nicht teilen den link, aber versuchen, die Bearbeitung in element untersuchen, auf jeder Website, wo Sie gespeichert haben Sie Ihre login-Daten in Firefox.

InformationsquelleAutor Sarah | 2014-07-16

2

Welche Art von browser-Unterstützung benötigen Sie? Sie können dies lösen, mit flexbox!
```
body (or container-div) {
  display: flex;
  align-items: center;
  justify-content: center;
}
```
Verwandeln Sie nimmt sich die prozentuale Berechnung aus dem element selbst, und die Marge bezieht sich auf das container-element, so dass das nicht-Zentrum. Wenn es gibt keinen Weg um Sie herum könnte ich brauchen, javascript zu verwenden, um zu berechnen, die negativen margins erforderlich. Trotzdem danke.
Sie haben vollkommen Recht, mein Fehler. Ich bearbeitet habe, die Antwort zu geben, Ihnen eine weitere alternative.
Ich brauche Sie werden rückwärts-kompatibel, wird aber noch etwas anderes zu machen, verschlechtern, für IE9 und unten. Danke!

InformationsquelleAutor Alon Dahari

CSS sollte rechts sein, aber die position sollte fest in deinem übergeordneten div

w3schools: position: absolute Das element wird relativ positioniert, um seine erste Position gebracht (nicht statisch) Vorfahren-element

.parent{
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%; 
    width: 100px;
    height: 100px; 
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}

<div class="parent">
    <div class="child"></div>
</div>

InformationsquelleAutor Chris Wong

0

Versuchen, diese zu zentrieren-div-Element auf einer Seite. Es ist ein eleganter Ansatz.
```
.center{
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
height:some-height;
width:some-width;
}
```
Ich glaube nicht, haben eine definierte Breite und Höhe wie es ein paar divs mit der gleichen styling die verschiedenen Größen, so können nicht diese Methode verwenden.
Es wird nützlich sein, wenn Sie zeigen, jsfiddle demo. so dass ich überprüfen kann es lokal.

InformationsquelleAutor cJ_

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.