Tekniker för att Centrera saker

Varje

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
https://css-tricks.com/almanac/properties/a/align-content/
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Centrera saker i flexbox. Du sätter display å justify å sådant. Som jag skrivit nedan i en flexboxcontainer. Då kommer Sakerna som finns i den diven att centreras.

.flexboxcontainer{
width: 400px;
height: 400px;
display: flex;
flex-direction: row; /*Du kan välja mellan row och column */
justify-content: center;
align-items: center;
}

.box-inside-flexboxcontainer {
}

Horizontell centrering

Text-align

Text-align-tekniken är klassisk. Först skapar du en div-container. Denna container behöver ha en specificerad width för att det ska funka. Annars kommer den bara vara så står som innehållet i diven, å då går det ju inte att centrera.

Sedan behöver vi en div som ska centreras. Vi ger den en längd å bredd. Det viktigaste här är att komma ihåg att en div inte är en text, å en div är ett block-element, inte ett inline-element. Därför måste vi förvandla diven till ett inline-blocks-element. Det gör vi med display: inline-block. Då får diven inline-liknande egenskaper samtidigt som den är typ som ett block.

.container {
width: 500px;
text-align: center;
}

.box {
width: 100px;
height: 100px;
display: inline-block;
}

Margin-auto-tekniken

Det går helt enkelt ut på att du sätter marginalen på auto i innerdiven. Då justerar den sig automatiskt och blir därmed centrerad.

.container {
width: 500px;
}

.box {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
}

Position-absolute-tekniken

Den här tekniken fungerar genom att sätta position absolute, å sedan sätta den på 50%. Detta innebär alltså att positionen är i mitten. Men eftersom diven i det här exemplet är 100px stor så innebär det att det är den vänstra sidan som är precis 50% in i container-diven. För att den ska bli helt centrerad måste vi därför justera marginalen med -50px (alltså hälften av diven storlek). Då blir den helt centrerad.

.container {
width: 500px;
}

.box {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
}

Vertical centering

Position-absolute-tekniken

Denna teknik är besläktad med tekniken ovan med samma namn. Men det finns några viktiga skillnader. För att innerdiven inte ska flyga iväg åt tjotahejti så måste vi göra .container till position: relative. Annars så flyger innerdiven upp å lägger sig med en margin på -50px från body. Å det vill vi inte.

.container {
width: 500px;
position: relative;
}

.box {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
}