Center icon in a div - horizontally and vertically
This question already has an answer here:
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:
Since they are already
inline-block child elements, you can set
text-align:center on the parent without having to set a
margin:0px auto on the child. Meaning it will work for dynamically generated content with varying
This will center the child within both
For vertical centering, you can use the
calc() function assuming the height of the icon is known.
jsFiddle demo - it works.
For what it’s worth - you can also use
display:table-cell is set on the parent. I wrote this solution about a month ago: Vertical-align middle