Wie zentriere ich ein untergeordnetes Element in CSS, auch wenn es größer als das übergeordnete Element ist?

Question

Ich möchte eine CSS-Klasse erstellen, damit ein div in der Mitte des übergeordneten Elements platziert werden kann. Der Code ich verwende ist:

.centered { 
    position: absolute; 
    margin: auto; 

    bottom: 0px; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
} 

Es funktioniert, wenn die Eltern größer als das untergeordnete Element ist, oder hat die gleiche Größe: https://jsfiddle.net/cy8dn1km/

Aber wenn das Kind größer ist, dann wird ihr Zentrum ist nicht in der Mitte des Elternteils positioniert. Statt ihre linken Grenzen werden an der gleichen Stelle sein, und das Kind-Element wird nur nach rechts erweitert werden:

https://jsfiddle.net/797L7nce/

Etwas ist mit der horizontalen Zentrierung falsch.

Wie ist es möglich, es nur mit CSS zu beheben (ohne Verwendung von CSS 2D/3D-Transformationen), ohne neue Container-Elemente hinzufügen?

Answer 1

Hier ist eine Lösung ohne CSS 2D/3D-Transformationen. Sie können display: flex mit flex-direction: column verwenden (dies ist wichtig) auf Elternelement und display: table auf Kindelement.

body, 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
body { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background: green; 
 
} 
 
.centered.d1 { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
} 
 
.d1 { 
 
    background: yellow; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.d2 { 
 
    background: red; 
 
    opacity: 0.7; 
 
    width: 250px; 
 
    height: 250px; 
 
    display: table; 
 
}

<div class="centered d1"> 
 
    <div class="centered d2"></div> 
 
</div>

Answer 2

Wenn Sie die Abmessungen der Elemente kennen, können Sie die linke/obere Position bei 50% mit negativen Rändern der halben Elementgröße verwenden.

ich Ihre Geige hier aktualisiert: https://jsfiddle.net/797L7nce/2/

.centered { 
    position: absolute; 
    display: block; 
    left:50%; 
    top:50%; 

} 

.d1 { 
    background: yellow; 
    width: 50px; 
    height: 50px; 
    margin-left:-25px; 
    margin-top:-25px; 
} 

.d2 { 
    background: red; 
    opacity: 0.7; 
    width: 250px; 
    height: 250px; 
    margin-left:-125px; 
    margin-top:-125px; 
} 

Answer 3

left: 50%; transform: translate(-50%, 0); hinzufügen und right: 0px;

.centered { 
    position: absolute; 
    margin: auto; 
    display: block; 
    bottom: 0px; 
    top: 0px; 
    left: 50%; 
    transform: translate(-50%, 0); 
} 

Demo

Answer 4

die unter CSS-.d2 löst Hinzufügen der Ausgabe entfernen.

.d2 { 
    background: red; 
    opacity: 0.7; 
    width: 250px; 
    height: 250px; 
    position:absolute; 
    left:50%; 
    margin-left:-125px; 
} 

können Sie überprüfen die Demo here

Answer 5

Ok habe ich versucht ohne 2D CSS:

ändern absolute zu fixed und fügen Sie einige margin: auto;

JSfiddle here

body, html { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    position: relative; 
 
    background: green; 
 
} 
 

 
.centered { 
 
    position: fixed; 
 
    margin: auto; 
 
    display: block; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    top: 0px; 
 
    right: 0px; 
 
} 
 

 
.d1 { 
 
    background: yellow; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
.d2 { 
 
    background: red; 
 
    opacity: 0.7; 
 
    width: 250px; 
 
    height: 250px; 
 
}

<div class="centered d1"> 
 
    <div class="centered d2"> 
 

 
    </div> 
 
</div>

Answer 6

Sie sind fast da.Stellen Sie einfach die absoluten Positionen auf die gleichen (groß) negative Zahl ist, genügend Platz für die auto Marge zu machen:

.centered { 
    position: absolute; 
    margin: auto; 

    bottom: -9999px; 
    left: -9999px; 
    top: -9999px; 
    right: -9999px; 
} 

https://jsfiddle.net/797L7nce/9/

Answer 7

In Bootstrap 4:

zu Zentrum das Kind horizontal, Bootstrap-4-Klasse verwenden:

justify-content-center 

zu Zentrum das Kind vertikal, verwenden Bootstrap-4-Klasse:

align-items-center 

aber nicht vergessen, vergessen Sie nicht mit diesen d-flex Klasse zu verwenden, es ist ein bootstrap- 4 Utility-Klasse, wie so

<div class="d-flex justify-content-center align-items-center" style="height:100px;"> 
    <span class="bg-primary">MIDDLE</span>  
</div> 

Hinweis: stellen Sie sicher, Bootstrap-4 Dienstprogramme hinzuzufügen, wenn dieser Code nicht

funktioniert Ich weiß, es ist nicht die direkte Antwort auf diese Frage, aber es hilft jemand kann