如何在内容可编辑的位置将占位符插入居中

Question

我正在尝试在Firefox和Chrome中将占位符插入标记垂直和水平居中放置，但在Firefox中无法正确对齐。

貌似：

https://i.imgur.com/3rqjGPU.jpg

实际代码：

.text {
    width: 200px;
    height: 200px;
    display: table;             
}
.text-ce {  
    font-family: 'Arial';       
    font-size: 24px;
    line-height: 1.3em;
    outline: none;
    text-align: center; 
    width: 200px;
    height: 200px;
    padding: 0 30px;
    user-select: text;
    word-wrap: break-word;
    word-break: break-all;          
    color: #FFF;
    display: table-cell;    
    vertical-align: middle;     
    position: relative;
    background-color: #C60;                             
}
[contentEditable=true]:empty::before{
    content:attr(placeholder);
    color: #CCC;     
}
[contentEditable=true]:focus:empty:before {
    padding-top: 85px;      
}

<div class="text">          
    <div class="text-ce" placeholder="Some text" contenteditable="true"></div>          
</div>

如果我像这样添加padding-left：

[contentEditable=true]:empty {
    padding-left: 95px;   
}

我得到：

https://i.imgur.com/wijF02d.jpg

如您所见，我可以对齐，但占位符出现错误，这在Chrome浏览器中是不正确的，我也不知道如何避免。

任何帮助表示赞赏！