JSFiddle - React, Tailwind, and code Playground
HTML
<div contenteditable></div>
CSS
* {
margin: 0;
padding: 0;
}
div[contenteditable] {
position: absolute;
left: 50%;
top: 50%;
margin-left: -160px;
margin-top: -20px;
width: 300px;
min-height: 20px;
line-height: 20px;
padding: 10px;
//box-shadow: 0 0 0 1px #ddd;
}
JavaScript
var $div = $('div[contenteditable]');
var divPadding = parseInt($div.css('padding-top'));
var divLineHeight = parseInt($div.css('line-height'));
var centerDiv = function () {
var windowHeight = window.innerHeight;
var divHeight = $div.height();
var divLines = divHeight / divLineHeight;
var divTop = (windowHeight / 2) - ((divLines - 1) * divLineHeight) - divPadding;
$div.css('top', divTop);
}
setInterval(function () {
centerDiv();
}, 50);