October 28, 2017 Syed Shah

Centering things using CSS

Center Horizontally

Center Text

If you just want to center text in an element you can just use text-align: center

Center Div

To horizontally center a div or any block element use margin: auto

Center Vertically

Centering vertically is bit trickier than centering horizontally, however there are multiple ways to do it (for eg using line height, padding etc). But my preferred approach is to use a combination of top, position and transform properties as follows

References

https://www.w3schools.com/css/css_align.asp

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

HTH 🙂

Share this...
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Tagged: , , ,

Contact Us

Get in touch to schedule your FREE consultation!