Position nach Mittelpunkt statt nach oben links

Question

Ist es möglich, den Code durch den Mittelpunkt eines Elements und nicht durch den oberen linken Punkt zu positionieren? Wenn mein Eltern Element

width: 500px; 

und mein Kind Element hat, dass

/*some width, for this example let's say it's 200px*/ 
position: absolute; 
left: 50%; 

man annehmen würde auf der Grundlage der 50% Positionierung hat, wird das Kind-Element in der Mitte der Eltern sein Lassen Sie von freiem Platz auf jeder Seite. Dies ist jedoch nicht der Fall, da der obere linke Punkt des Kindes 50% der Breite des Elternteils ist. Daher wird die gesamte Breite des Kindes von 200px von dort nach rechts verschoben, wobei 250px Freiraum auf der linken Seite bleibt 50px auf der rechten Seite.

Also, meine Frage ist, wie Center Positionierung zu erreichen?

fand ich diese Lösung:

position: absolute; 
width: 200px; 
left: 50%; 
margin-left: -100px; 

aber ich mag es nicht, weil Sie es für jedes Element Breite manuell bearbeiten müssen - ich möchte etwas, das weltweit funktioniert.

(Wenn ich beispielsweise in Adobe After Effects arbeite, kann ich eine Position für ein Objekt festlegen und dann einen bestimmten Ankerpunkt für das Objekt festlegen, das an diese Position gesetzt wird. Wenn die Zeichenfläche 1280px breit ist, positionieren Sie sich ein Objekt zu 640px und Sie das Zentrum des Objekts wählen Sie Ihren Ankerpunkt sein, dann ist das ganze Objekt wird innerhalb der 1280px breiten Leinwand zentriert)

ich so etwas wie dies in CSS vorstellen würde.

position: absolute; 
left: 50%; 
horizontal-anchor: center; 

In ähnlicher Weise würde horizontal-anchor: right das Element b positionieren y seine rechte Seite, so würde der gesamte Inhalt auf der linken Seite von der Breite seiner Eltern 50% sein.

Und das gleiche würde gelten für vertical-anchor, Sie bekommen es.

Also, ist so etwas möglich mit nur CSS (keine Skripte)?

Danke!

Answer 1

Wenn das Element muss absolut positioniert werden (so ist margin: 0 auto; keinen Nutzen für Zentrierung) und Scripting ist indiskutabel , Sie könnten dies mit CSS3-Transformationen erreichen.

.centered-block { 
    width: 100px; 
    left: 50%; 
    -webkit-transform: translate(-50%, 0); 
    position: absolute; 
} 

Siehe diese fiddle für einige Beispiele. Die wichtigen Teile: left: 50%; schiebt Block auf halbem Weg über sein Elternteil (so ist seine linke Seite auf der 50% -Markierung, wie Sie erwähnt haben). transform: translate(-50%, 0); zieht die Blockhälfte, es ist eigene Breite zurück entlang der X-Achse (dh. Nach links), die es direkt in der Mitte des Elternteils platzieren wird.

Beachten Sie, dass es unwahrscheinlich ist, dass es browserübergreifend kompatibel ist und für alte Browser immer noch einen Rückfall erfordert.

Answer 2

links: 50% zentriert nicht den Schwerpunkt dieses div 50% nach links, es ist der Abstand zwischen dem linken Rand und dem linken Rand des Elternelements, also müssen Sie im Grunde einige Berechnungen durchführen .

left = Width(parent div) - [ Width(child div) + Width(left border) + Width(right border) ] 

left = left/2 

So können Sie eine Javascript-Funktion tun ...

function Position(var parentWidth, var childWith, var borderWidth) 
{ 
     //Example parentWidth = 400, childWidth = 200, borderWidth = 1 
     var left = (parentWidth - (childWidth + borderWidth)); 
     left = left/2; 
     document.getElementById("myDiv").style.left= left+"px"; 
} 

Answer 3

Wenn das Hinzufügen eines weiteren Elements eine Option ist, ist folgendes zu beachten:

(View the following code live here)

HTML:

<div class="anchor" id="el1"> 
    <div class="object"> 
    </div> 
</div> 
<div class="anchor" id="el2"> 
    <div class="object"> 
    </div> 
</div> 

CSS:

/* CSS for all objects */ 

div.object 
{ 
    width:    100%; 
    height:    100%; 
    position:   absolute; 
    left:    -50%; 
    top:     -50%; /* to anchor at the top center point (as opposed to true center) set this to 0 or remove it all together */ 
} 

div.anchor 
{ 
    position:   absolute; /* (or relative, never static) */ 
} 


/* CSS for specific objects */ 

div#el1 
{ 
    /* any positioning and dimensioning properties for element 1 should go here */ 
    left:    100px; 
    top:     300px; 
    width:    200px; 
    height:    200px; 
} 

div#el2 
{ 
    /* any positioning and dimensioning properties for element 2 should go here */ 
    left:    400px; 
    top:     500px; 
    width:    100px; 
    height:    100px; 
} 

div#el1 > div.object 
{ 
    /* all other properties for element 1 should go here */ 
    background-color: purple; 
} 

div#el2 > div.object 
{ 
    /* all other properties for element 2 should go here */ 
    background-color: orange; 
} 

Im Wesentlichen erstellen wir ein Objekt, um die Position, Breite und Höhe des Elements zu definieren, und legen dann ein weiteres innerhalb des Objekts, das um 50% versetzt wird, und erhält die übergeordneten Dimensionen (z. B. width: 100%).

Answer 4

Stolperte über diese Frage, und ich möchte eine andere Möglichkeit hinzufügen, um Inhalt in einem div zu zentrieren.

des CSS3-Anzeigemodus ‚flexible Box‘ Durch die Verwendung, wie es in den folgenden CSS-Eigenschaften an der Mutter div Einstellung

display: flex; 
position: relative; 
align-items: center; 
justify-content:center; 

Und ‚mindestens‘ Einstellung die folgenden Eigenschaften für das Kind div

position:relative; 

Der Browser zentriert automatisch den Inhalt innerhalb des Eltern-Divs, unbeeinflusst von ihrer Breite oder Höhe, dies ist besonders praktisch, wenn Sie etwas wie ein Bildraster entwickeln oder einfach den Aufwand für die Berechnung einer divs-Position entfernen möchten. dann h aways, um es neu zu berechnen, wenn Sie Ihre Meinung über den Aufbau des besagten Divs ändern.

In meiner eigenen Arbeit, neige ich dazu, eine Klasse

.center-center 

Mit den Eigenschaften mit dem Namen Set-up ich für das übergeordnete div beschrieben, dann fügen Sie ihn einfach zu welchem ​​Element, von dem ich seinen Inhalt zentriert müssen.

Ich habe eine JSFiddle erstellt, um diese Erklärung zu unterstützen. Fühlen Sie sich frei, auf die roten Quadrate zu klicken, um die Positionierung in Aktion zu sehen.

https://jsfiddle.net/f1Lfqrfs/

Für Multi-Line-Support, können Sie (oder uncomment im JSF) die folgenden CSS-Eigenschaft auf den DIV Eltern hinzufügen

flex-wrap: wrap;