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

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

<div class="img_container">   <i class="icon-play-circle"></i> </div> <br> <div class="img_container2">   <i class="icon-play-circle"></i> </div> 

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; } 

Answer 1

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 > i, .img_container2 > 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.