Make center point of rotation in center

Question

I am trying to rotate an element with animation. I was able to successfully implement that, but the problem is, when it rotates, the text in the div doesn't rotate from the middle, so it comes out that it's a bit wobbly.

How can I make the center point of the rotation in the middle of the div ?

JSFiddle

 var container = document.getElementById('container'), buttonContainer = document.getElementById('buttonContainer'), button = document.getElementById('button'); buttonContainer.addEventListener('click', expandElem); function expandElem(e) { toggleClass(button, 'expand'); } function hasClass(ele, cls) { return ele.className.match(new RegExp('(\\\\s|^)' + cls + '(\\\\s|$)')); } function addClass(ele, cls) { if (!hasClass(ele, cls)) ele.className += " " + cls; } function removeClass(ele, cls) { if (hasClass(ele, cls)) { var reg = new RegExp('(\\\\s|^)' + cls + '(\\\\s|$)'); ele.className = ele.className.replace(reg, function(match) { if (match.match(/^\\s.+\\s$/) !== null) return ' '; else return ''; }); } } function toggleClass(element, className) { if (!element || !className) return; if (hasClass(element, className)) removeClass(element, className); else addClass(element, className); } 

 #buttonContainer { cursor: pointer; width: 100px; height: 100px; font-size: 20px; font-weight: bold; margin: auto; color: white; } #button { width: 60px; height: 60px; line-height: 60px; font-size: 50px; display: inline-block; transform: rotate(0deg); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); } #button.expand { transform: rotate(630deg); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } #container { margin: auto; top: 5vh; background-color: #03A9F4; border-radius: 25px; width: 100px; max-width: 100px; height: 100px; text-align: center; transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s; } 

 <div id="container"> <div id="buttonContainer"> <span id="button">&#128339;</span> <span id="title">History</span> </div> </div> 

Answer 1

line-height: 63.5px; gives you 4pixel top 4pixel bottom measured it with photoshop.