Cursor is not centered in an empty editable anchor with text-align center on firefox

I have some anchor tags as buttons in an application on which contenteditable is set to true and tex-align is set to center

but if an anchor has no text in it the cursor should be centered as the tex-align is set to center and it workes as expected on chrome but on firefox it shows the cursor to extreme left when nothing is typed.

for reference here's the HTML code:

<a class="editable" contenteditable>

</a>

and CSS:

.editable {
  display:block;
  color: red;
  border:1px solid red;
    height: 100px;
  width:100%;
  text-align:center;

}

or try this codepen on chrome and firefox:

https://codepen.io/zeeshanadilbutt/pen/ajLqKM?editors=1100

I know it is a bug with Firefox but is there a way to solve this?

from Cursor is not centered in an empty editable anchor with text-align center on firefox