textareaの上下中央揃えについて

textareaの横幅200px高さが１００pxあったとして、テキストの入力開始位置を上下中央にすることは可能でしょうか。
不可能な場合、他のdivタグなどをw200px,h100pxで作りtextareaを中央配置し、divの領域をクリックしたらtextareaへ入力状態になるようなことは可能でしょうか。
何卒よろしくお願いいたします。

html
1
2<textarea>テキスト</textarea>
3

css
1
2textarea {
3  text-align: center;
4  width: 200px;
5  height: 100px;
6}
7

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <title>サンプル1</title>
6		<style type="text/css">
7			html,body {
8				margin: 0;
9				padding: 0;
10			}
11			form > textarea {
12				width: 200px;
13				height: 100px;
14				position: absolute;
15				top:50%;
16				left:50%;
17				margin-top: -50px;
18				margin-left: -100px;
19			}
20		</style>
21    </head>
22    <body>
23		<div>
24			<form action="">
25				<textarea>テキスト</textarea>
26			</form>
27		</div>
28    </body>
29</html>
30

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <title>サンプル2</title>
6		<style type="text/css">
7			html, body, body > div {
8				margin: 0;
9				padding: 0;
10				height: 100%;
11			}
12			form {
13				display: flex;
14				height: 100%;
15				justify-content: center;
16				align-items: center;
17			}
18			textarea {
19				width: 200px;
20				height: 100px;
21			}
22		</style>
23    </head>
24    <body>
25		<div>
26			<form action="">
27				<textarea>テキスト</textarea>
28			</form>
29		</div>
30    </body>
31</html>

こういうことかなというのを解釈して

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <title>サンプル2</title>
6		<style type="text/css">
7			div#textarea {
8				width: 200px;
9				height: 100px;
10				display: flex;
11                justify-content: center;
12                align-items: center;
13				border: 1px solid #CCC;
14			}
15			textarea {
16				width: 100%;
17				height: 100%;
18				resize: none;
19			}
20		</style>
21    </head>
22    <body>
23		<div>
24			<form action="">
25				<div id="textarea">
26					テキスト
27				</div>
28			</form>
29		</div>
30		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
31		<script type="text/javascript">
32			$(function () {
33				$("#textarea").on('click', function (e) {
34					e.preventDefault();
35					var txt = $(this).text().trim();
36					$(this).html($('<textarea>').val(txt));
37					$('textarea').focus();
38				});
39				$('body').on('blur', 'textarea', function () {
40					var txt = $('textarea').val();
41					$('#textarea').text(txt);
42				});
43			});
44		</script>
45    </body>
46</html>