In a previous quick tip I showed you how to center elements with the transform attribute. Today we’ll try it with Flexbox. Please refer to MDN’s definition of Flexbox. Now let’s get started with basic centering… I did say “Bulls Eye”, didn’t I? .container { display: -webkit-flex; /* Safari */ display: flex; width: 100%; height: [ Read More… ]
Vertically and horizontally center relative positioned elements @mixin vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); margin: auto; } Vertically and horizontally center absolute positioned elements @mixin absolute_vertical_align() { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: [ Read More… ]