Rectangle 27 0

html How to center align font awesome icons vertically in a circle div?


.fa-vc{line-height:inherit!important;}
<i class="fa fa-times fa-vc"></i>

Set a class for font awesome such as .fa-vc then add it to all font awesome font you want it to be aligned with other text. your code will looks like(this sample is a 'x' sign)

Note
Rectangle 27 0

html How to center align font awesome icons vertically in a circle div?


Here's the example working in a fiddle.

Thanks. I thought i should give the line-height to the containing div. but now only am get to know that i should give it to the child(.fa-camera-retro) too

Try adding this .fa-camera-retro { line-height: inherit;} to your css. Using inherit makes line-height take on the height of its containing div, so all icons will be centered even if those divs are different sizes. If you want, you can also set the line-height to the div's height in pixels to explicitly center it, ie line-height: 80px .

You can use line-height to align the icon in the div.

Note
Rectangle 27 0

html How to center align font awesome icons vertically in a circle div?


<span class="fa-stack fa-2x">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

Not to detract from the above solution which functions perfectly, but Font Awesome 4 has a great stacking feature that can be used with the following code.

There's some really nice options and combinations that can be found here.

This is the right answer. Do use put custom style when not needed.

Note
Rectangle 27 0

html How to center align font awesome icons vertically in a circle div?


.container{
   position: relative;
}

.target{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}
<div class="container>
   <div class="target">
   </div>
</div>

the equal line-height and text-align: center works very well to make icon in the middle both vertically and horizontally. However, if you want to make anything centered both vertically and horizontally in a dynamic way, code like this -

Note
Rectangle 27 0

html How to center align font awesome icons vertically in a circle div?


@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@include vertical-align;

This css works very well as no px units need to me declared. No matter what the content size or container the icon will be vertically center...I think some people saw your code maybe some did not understand this was sass...you should always answer assuming people don't know...after all its the reason we all come here. For future readers just take the css position: absolute; top: 50%; transform: translateY(-50%); and apply to a class or your element and adjust it accordingly. This should be the answer @Gothburz you should update your answer with just plane jane css

Works beautifully if you're using Boostrap as well, use a center-block class and it's perfectly centered.

Note
Rectangle 27 0

html How to center align font awesome icons vertically in a circle div?


display: table-cell
div
vertical-align: middle
Note