CSSPAGE008

#csspage008_01

transform : translate

position:relative;

position:absolute;
transform: translate(-50%, -50%);

#csspage008_02

Centering: using mixin

Parent element must be position:relative
tutorial: REF

.parent

.child

This is the "inner element" being centered

@mixin centerer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .parent { position: relative;} .child { @include centerer; }

#csspage008_03

postion:relative vs. transform:translate()

Reference

#1
position:relative;
left:50%;

#2
position:absolute;
left:50%;

#3
transform:translate(50%);