Centering FontAwesome icons vertically and horizontally

Question

I m currently using FontAwesome  and am having a really hard time centering the icons both vertically and horizontally in their container   I have tried doing it via positioning and ran into issues bc the icon sizes were different   I basically have the horizontal  and am trying to get the vertical     lt div class  container  gt       lt div class  row  gt           lt div class  offset2 span6 loginContainer  gt               lt div class  row  gt                   lt div class  login-icon  gt                           lt i class  icon-user  gt  lt  i gt                   lt  div gt                   lt input type  text   placeholder  Email    gt                lt  div gt               lt div class  row  gt                   lt div class  login-icon  gt  lt i class   icon-lock   gt  lt  i gt  lt  div gt                   lt input type  password  class    placeholder  Password    gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    login-icon      font-size  40px      line-height  40px      background-color black      color white      width  50px      height  50px      login-icon  class   icon-      height  50px    width  50px    display  inline-block    text-align  center    vertical-align  baseline      http   jsfiddle net ncapito e2UPC

User · Answer

I just lowered the height to 28px on the  login-icon  class   icon-   Here s the fiddle  http   jsfiddle net mZHg7    login-icon  class   icon-        height  28px      width  50px      display  inline-block      text-align  center      vertical-align  baseline

User · Answer

So I finally got it http   jsfiddle net ncapito eYtU5      centerWrapper before       content         height  100       display  inline-block      vertical-align  middle      center       display inline-block      vertical-align  middle      lt div class  row  gt       lt div class  login-icon  gt           lt div class  centerWrapper  gt               lt div class  center  gt   lt i class  icon-user  gt  lt  i gt  lt  div gt          lt  div gt       lt  div gt       lt input type  text  placeholder  Email    gt    lt  div gt

User · Answer

This is all you need  no wrapper needed    login-icon      display inline-block      font-size  40px      line-height  50px      background-color black      color white      width  50px      height  50px      text-align  center      vertical-align  bottom      http   jsfiddle net e2UPC 6

User · Answer

If you are using twitter Bootstrap add the class text-center to your code     lt div class  login-icon  gt  lt i class  icon-lock text-center  gt  lt  i gt  lt  div gt

User · Answer

the simplest solution to both horizontally and vertically centers the icon    lt div class  d-flex align-items-center justify-content-center  gt       lt i class  fas fa-crosshairs fa-lg  gt  lt  i gt   lt  div gt

User · Answer

I just managed how to center icons and and making them a container instead of putting them into one    fas       position  relative      color   EEE      font-size  16px     fas before       position  absolute      left  calc 50  -  5em       top  calc 50  -  5em      fas fa-icon       width  60px      height  60px      color  white      background-color  black

User · Answer

I have used transform to correct the offset  It works great with round icons like the life ring     lt span class  fa fa-life-ring  gt  lt  span gt    fa       transform  translateY -4

[css] Centering FontAwesome icons vertically and horizontally

Examples related to css

Examples related to twitter-bootstrap

Examples related to font-awesome