Центрирование метки-заполнителя в contentEditable

У меня есть следующее: http://jsfiddle.net/mb76koj3/.

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

h1 {
  text-align: center;
}

<h1 contenteditable="true" data-ph="Name"></h1>

Ответ 1

Не идеальное решение, но мы можем подделать эффект, применив padding-left от 50% к элементу :empty, чтобы курсор появился посередине.

И затем выровняйте заполнитель (псевдоэлемент) посередине, используя абсолютное позиционирование и отрицательное значение функции преобразования 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;
}

<h1 contenteditable="true" data-ph="Name"></h1>

Ответ 2

Посмотрев на ответ Hashem Qolami, я придумал следующее:

[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;
}

<h1 contenteditable="true" data-ph="Name"></h1>