Dynamiskt centrera ett element i en behållare med CSS

När det kommer till att skriva om utveckling pratar jag inte ofta om saker utöver PHP och JavaScript främst för att jag jobbar med de språken mer än andra.

Jag menar, ja, CSS är en del av affären liksom HTML, men det förväntas i dessa dagar, eller hur?

Så om det någon gång fanns ett snabbt tips för mig att ge angående CSS så är det det här (även om jag kanske borde skriva mer?). Det är svårt när Chris gör ett så fantastiskt jobb med att köra CSS Tricks, men jag avviker.

Hur som helst, här är problemet och lösningen.

Dynamiskt centrera ett element i en behållare

Idén med att dynamiskt centrera ett element är baserad på följande scenario:

• Du ringer ett API som kommer att svara med en uppsättning, till exempel, bilder när anropet är klart.
• Du måste centrera varje bild i dess behållare.
• Bilderna kommer inte att ha en fast höjd och kommer att behöva placeras dynamiskt och centreras i behållare i användargränssnittet.

Kanske är detta fortfarande lite allmänt. Om så är fallet, låt oss anta att du har en lista (ordnad eller oordnad, det spelar ingen roll). De har en fast höjd och bredd, och du kommer att placera bilderna, skalade, inom varje element.

Kom ihåg: du kan inte placera saker som div – element inom li – element (eftersom en div är ett element på blocknivå) utan att ändra det via någon CSS. Och det vill vi undvika att göra.

Så i slutändan kan användargränssnittet se ut ungefär så här (rå, jag vet):

Om du vill att varje bild ska placeras i listobjektet, du vill att den ska ha en viss skalad höjd, och du vill att den ska centreras, prova följande kodbit :

.acme-element {
  position:   relative;
  top:        50%;
  transform:  translateY(-50%);
  height:     auto;
  max-height: 190px;
}

Nyckeln till detta är egentligen transformationsstilen. Enligt MDN :

CSS-funktionen translateY() placerar om ett element vertikalt på 2D-planet. Resultatet är en datatyp.

Vettigt?

Tänk på det så här: TranslateY -funktionen tar ett givet element (identifieras av dess väljare) och placerar det med det angivna värdet.

Det handlar om förvandlingar

Du kan använda pixlar, procentsatser eller vad det nu är du behöver för att få det att hända. I det här fallet är det procentsatser (och de är negativa). Även om jag använder ett exempel på min implementering, är det också tänkt att vara ett tips om hur man använder transformY –  funktionen med relation till transformer.

Om webbläsarkompatibilitet spelar roll – vilket det i vissa fall borde – kolla in det här diagrammet. Du är ganska väl täckt.