Center icon in a div - horizontally and vertically

Question

I m having issues centering icons  both vertically and horizontally  in a parent div   I have many parent divs on my page that are different sizes  so I want to be able to proportionally place icons in the center of each parent div  Here s a JSFiddle of the problem   JsFiddle  HTML   lt div class  img container  gt     lt i class  icon-play-circle  gt  lt  i gt   lt  div gt   lt br gt   lt div class  img container2  gt     lt i class  icon-play-circle  gt  lt  i gt   lt  div gt    CSS   img container      width 100px      height 100px      position relative      background red      img container2      width 100px      height 50px      position relative      background blue      icon-play-circle      position absolute      top 45       left 45       color  white

User · Accepted Answer

Since they are already inline-block child elements  you can set text-align center on the parent without having to set a width or margin 0px auto on the child  Meaning it will work for dynamically generated content with varying widths    img container   img container2       text-align  center      This will center the child within both div containers   UPDATE   For vertical centering  you can use the calc   function assuming the height of the icon is known    img container  gt  i   img container2  gt  i       position relative      top  calc 50  - 10px      50  - 3 4 of icon height        jsFiddle demo - it works   For what it s worth - you can also use vertical-align middle assuming display table-cell is set on the parent

User · Answer

Here is a way to center content both vertically and horizontally in any situation  which is useful when you do not know the width or height or both   CSS   container       display  table      width  300px     not required  just for example        height  400px     not required  just for example        update       display  table-cell      vertical-align  middle      text-align  center      HTML   lt div id  container  gt       lt a id  update  href     gt           lt i class  icon-refresh  gt  lt  i gt       lt  a gt   lt  div gt    JSFiddle  Note that the width and height values are just for demonstration here  you can change them to anything you want  or remove them entirely  and it will still work because the vertical centering here is a product of the way the table-cell display property works

User · Answer

Horizontal centering is as easy as   text-align  center   Vertical centering when the container is a known height   height  100px  line-height  100px  vertical-align  middle   Vertical centering when the container isn t a known height AND you can set the image in the background   background  url someimage  no-repeat center center

[html] Center icon in a div - horizontally and vertically

Examples related to html

Examples related to css