源码下载：https://files.cnblogs.com/files/heyang78/hvcenter_211214.rar
实现一：（在Editplus和chrome都通过）
先上图：
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>textarea在div内水平垂直都居中的实现一</title> <script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script> <style type="text/css"> .outerDiv{ width:400px; height:400px; margin:0 auto; border:1px solid red; position:relative; } .outerDiv textarea{ width:200px; height:200px; position:absolute; left:100px; top:100px; } </style> </head> <body> <div class="outerDiv"> <textarea cols=20 rows=20>1234</textarea> </div> </body> <script type="text/javascript"> </script> </html>
实现2：（在Editplus和chrome都通过）
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>textarea在div内水平垂直都居中的实现二</title> <script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script> <style type="text/css"> .outerDiv{ width:400px; height:400px; margin:0 auto; border:1px solid red; position:relative; } .outerDiv textarea{ width:200px; height:200px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } </style> </head> <body> <div class="outerDiv"> <textarea cols=20 rows=20>1234</textarea> </div> </body> <script type="text/javascript"> </script> </html>
实现代码3：（仅在Chrome好用）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>textarea在div内水平垂直都居中的实现三</title> <script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script> <style type="text/css"> .outerDiv{ width:400px; height:400px; margin:0 auto; border:1px solid red; display:flex; justify-content:center; align-items:center; } .outerDiv textarea{ width:200px; height:200px; } </style> </head> <body> <div class="outerDiv"> <textarea cols=20 rows=20>1234</textarea> </div> </body> <script type="text/javascript"> </script> </html>
参考资料：
https://blog.csdn.net/weixin_36095188/article/details/113047506
END