Caret position when centering with flexbox in contenteditable

Question

Tested on OSX Chrome 45, align-items: center; is working for content, but if you click into the empty editable below, the caret position is not centered until you start typing.

Is the only way to fix this with top/bottom balanced padding or is there a way of getting this to work without pixel shifting? Thanks

[contenteditable="true"] {
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    min-height: 46px;
}

[contenteditable="true"]:focus {
    outline: none;
}

<div contenteditable="true"></div>
<div contenteditable="true">content is centered, but caret isn't</div>

Answer 1

As James Donnelly said in the comment, you can try adding line-height to your rules, eg:

[contenteditable="true"] {
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    min-height: 46px;
    line-height: 46px;
}

However I'd actually probably go with padding instead. Adding the min-height to your contenteditable element is what's causing the issues between the cursor and the inputted value. Take away the min-height, and the problem is solved. Then your problem becomes "How do I add an even amount of space around this contenteditable element?" - and that's exactly what padding is for :)

So perhaps something more like:

[contenteditable="true"] {
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    padding: 15px 0;
}

Depends on what exactly you're trying to implement though, and whether you really need to fix the height of the div.