5 Ways to Center with CSS! [VOICE TUTORIAL]

Опубликовано: 07 Июнь 2016
на канале: Marc Hinton

36,958

573

Instagram:
/ itsmarchinton - @itsmarchinton
Hey! In this video I show you 5 different and equally useful ways to center different types of content with CSS!

Method #1 - 0:30

Written Like:
display: block;
margin: 0 auto;

Description:
This method of centering is by far the one that I use the most. It is a simple, reliable and more of all quick way to center any sort of content, not just text.

Method #2 - 2:05

Written Like:
display: flex;
align-items: center;
justify-content center;

Description:
The flex property is one of the lesser known CSS properties and I think this is down to it being really temperamental. It takes a little practice to get good at but when you do, it's super powerful and you'll use it everyday. It also allows you to center without defining the width of the content.

Method #3 - 3:50

Written Like:
position: absolute;
left: 50%;
transform: translate -50%, 0;
Put the -50%, 0 in brackets. YouTube wouldn't let me.

Description:
This is probably my second or third favourite means of centering with CSS and it seems crazy that it was set up to work this way. By setting the left property to 50% and then using transform to drag the content back by 50% of it's own width, it allows for content to be centered every time. This can be used for more than just text also!

Method #4 - 5:30

Written Like:
Type center in angle brackets and close it off. Anything inside will be centered. YouTube won't let me type angle brackets here.

Description:
I would not recommend this for every piece of content that you need to be centered. It has known compatibility issues with older browsers and website tests will flag this as being outdated. It is good however if you're testing as it's quick, easy to write and remember and to be honest, it works!

Method #5 - 6:45

Written Like:
text-align: center;

Description:
This is pure and simple CSS. This method is limited to just text but it is easy to write and will center your text with just this one parameter!

Website:
www.marchinton.com

Twitter:
www.twitter.com/marchintonn

Facebook:
www.facebook.com/marchintondevelopment