Maximale Breite des absolut positionierten Elements

Question

Ich habe ein zentriertes div (mit absoluter Positionierung und Transformation: translate (-50%, - 50%) wie beschrieben here). Wenn der Inhalt des Child Div kurz ist, funktioniert alles gut. Wenn der Inhalt lang ist, ist die untergeordnete div-Breite auf 50% des Container-Div beschränkt (wahrscheinlich, weil left auf 50% gesetzt ist).

Gibt es eine Möglichkeit, die untergeordnete div nur auf die volle Breite zu erweitern, wenn der Inhalt lang ist?

.container { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border: 2px solid black; 
 
} 
 

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

<div class="container"> 
 
    <div class="child">short</div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="child">long long long long long long long</div> 
 
</div>

bearbeiten: Ich fand eine Erklärung, die mich um diese in this Antwort wickeln meinen Kopf geholfen.

Answer 1

in einem zusätzlichen verschachtelten Elemente hinzufügen, ihnen mehr Kontrolle über die Dynamik ermöglichen Positionierung und Skalierung der betreffenden Elemente.

.container { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border: 2px solid black; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
} 
 

 
.child-inner { 
 
    background: lightgreen; 
 
    left: 0; 
 
    right: 0; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div class="child"><div class="child-inner">short</div></div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="child"><div class="child-inner">long long long long long long long</div></div> 
 
</div>

Answer 2

Fügen Sie einfach ein display: table zum Child div hinzu, dies sollte Ihnen das gewünschte Ergebnis geben.

.container { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border: 2px solid black; 
 
} 
 

 
.child { 
 
    display: table; 
 
    position: relative; 
 
    transform: translate(-50%, -50%); 
 
    left: 50%; 
 
    top: 50%; 
 
    background:lightgreen; 
 
}

<div class="container"> 
 
    <div class="child">short</div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="child">long long long long long long long</div> 
 
</div>

Wenn Sie flexbox verwenden können, können Sie dies auch:

.container { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    vertical-align: top; 
 

 
    width: 200px; 
 
    height: 200px; 
 
    border: 2px solid black; 
 
} 
 

 
.child { 
 
    background:lightgreen; 
 
}

<div class="container"> 
 
    <div class="child">short</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="child">long long long long long long long</div> 
 
</div>