运用contenteditable实现输入框高度自动增加，输入框标题name相对高度自动居中，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="format-detection" content="telephone=no" /> <title>contenteditable可编辑属性</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style type="text/css"> .container { position: relative; width: 300px; min-height: 40px; padding-left: 100px; } .name { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100px; } .input { line-height: 40px; } </style> </head> <body> <div class="container"> <div class="name">备注说明：</div> <div class="input" contenteditable="true">可编辑输入框</div> </div> </body> </html>
美中不足之处，contenteditable属性模拟的输入框是可以输入HTML代码的，在提交给后台的时候需要做一下过滤，要不然会被xss注入攻击；或者提交的时候用js获取模拟input的innerText提交。
