Centrar el marcador de posición en contenido Elemento editable

Tengo lo siguiente: http://jsfiddle.net/mb76koj3/ .

[contentEditable=true]:empty::before{ content:attr(data-ph); color: #CCC; text-align: center; } h1 { text-align: center; } 
 

El problema es que

está centrado, pero el marcador de posición no está centrado (hasta que empiezas a escribir). El cursor está en el lado izquierdo, ¿cómo puedo cambiar esto?

No es una solución ideal, pero podemos simular el efecto aplicando un padding-left del 50% al elemento :empty para hacer que el cursor aparezca en el medio.

Y luego alinee el marcador de posición (el pseudo-elemento) en el medio usando posicionamiento absoluto y un valor negativo de la función de transformación translateX .

 * { margin: 0; padding: 0; } @-moz-document url-prefix() { /* CSS Hack to fix the position of cursor on FF */ [contentEditable=true]:empty { padding-top: 1em; padding-bottom: .25em; -moz-box-sizing: content-box; } } [contentEditable=true]:empty { padding-left: 50%; text-align: left; /* Fix the issue on IE */ } [contentEditable=true]:empty::before{ content:attr(data-ph); color: #CCC; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } h1 { text-align: center; position: relative; } 
 

Después de mirar la respuesta de Hashem Qolami , se me ocurrió esto:

 [contentEditable=true]:empty { padding-left: 50%; } [contentEditable=true]:empty::before{ content:attr(data-ph); color: #CCC; text-align: center; margin-left: -100%; } h1 { text-align: center; }