Erichain/css-center-complete

Code for centering elements in css. From https://css-tricks.com/centering-css-complete-guide/

css-center-complete

Code for centering elements in css. From https://css-tricks.com/centering-css-complete-guide/

Translation

简体中文

Contents

To make everyone understand the centering in css, we use a tree contents.

• Horizontally
  • Centering inline or inline-* elements (like link or text) horizontally
  • Centering block level elements horizontally
  • Centering more than one block level elments horizontally
• Vertically
  • Centering inline or inline-* elements (like link or text) vertically
    • Single line
    • Multiple lines
  • Centering block level elements vertically
    • Know the height of the element
    • Unknown the height of the element
    • Using Flexbox
• Both Horizontally and Vertically
  • Element of fixed height and width
  • Element of unknown height and width
  • Using flexbox

Every situation has its own code pen link.

License

Release under the MIT License.