Basta ya de indagar por todo internet porque llegaste al espacio correcto, poseemos la solución que necesitas recibir pero sin problemas.
Solución:
Como ya estan inline-block elementos secundarios, puede configurar text-align:center en el padre sin tener que establecer un width o margin:0px auto en el niño. Lo que significa que funcionará para contenido generado dinámicamente con diferentes widths.
.img_container, .img_container2
text-align: center;
Esto centrará al niño en ambos div contenedores.
ACTUALIZAR:
Para el centrado vertical, puede utilizar el calc() función asumiendo que se conoce la altura del icono.
.img_container > i, .img_container2 > i
position:relative;
top: calc(50% - 10px); /* 50% - 3/4 of icon height */
Demostración de jsFiddle – funciona.
Por lo que vale, también puede usar vertical-align:middle asumiendo display:table-cell se establece en el padre.
Aquí hay una forma de centrar el contenido tanto vertical como horizontalmente en cualquier situación, lo cual es útil cuando no conoce el ancho, el alto o ambos:
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
JSFiddle
Tenga en cuenta que los valores de ancho y alto son solo para demostración aquí, puede cambiarlos a lo que desee (o eliminarlos por completo) y seguirá funcionando porque el centrado vertical aquí es un producto de la forma en que table-cell mostrar propiedad funciona.
El centrado horizontal es tan fácil como:
text-align: center
Centrado vertical cuando el contenedor tiene una altura conocida:
height: 100px;
line-height: 100px;
vertical-align: middle
Centrado vertical cuando el contenedor no tiene una altura conocida Y puede establecer la imagen en el fondo:
background: url(someimage) no-repeat center center;