为什么Flexbox对齐规则对::placeholder伪元素不生效？

• 替换元素的渲染逻辑限制：<input>、<textarea>属于浏览器内置的替换元素，这类元素的内部结构、样式渲染由浏览器原生实现，和普通非替换元素完全独立。给元素本身设置display: flex仅作用于元素外部的布局上下文，不会透传到内部的::placeholder伪元素的渲染环境，这和普通元素的::before/::after直接继承父元素布局上下文的逻辑完全不同。
• ::placeholder本身的属性限制：绝大多数浏览器给::placeholder设置的默认display值为inline或inline-block，本身不会作为弹性项参与父元素的flex布局计算，自然无法响应align-items、justify-content等flex相关属性。
• 规范实现限制：W3C目前对表单替换元素的伪元素和父元素布局的交互规则定义非常模糊，各大浏览器厂商均未开放::placeholder继承父元素flex上下文的能力，这是flex对placeholder不生效的核心原因。

直接对::placeholder伪元素本身设置flex规则即可实现对齐，示例代码如下：

/* 通用前缀兼容，可根据目标浏览器范围调整 */
textarea::-webkit-input-placeholder,
textarea::-moz-placeholder,
textarea:-ms-input-placeholder,
textarea::placeholder {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::placeholder {
  display: flex;
  height: 100%;
  align-items: flex-start;
  justify-content: center;
}
/* 原元素样式保留高度即可 */
textarea {
  height: 10rem;
}
input {
  height: 10rem;
}

对应的HTML代码无需修改：

<textarea placeholder="Some text"></textarea>
<input placeholder="Some text" />

内容的提问来源于stack exchange，提问作者mdcq