调整textarea大小保持其水平居中的方法

马黑黑

textarea元素默认可调节尺寸：往右、下方向拖曳元素左下角。当拖曳行为发生，textarea元素左、上位置固定不变，元素仅往右、下方向扩张。有时候我们希望textarea元素在改变尺寸时上边位置固定、元素保持居中。这个，仅需要CSS就可以实现，请看代码：

<style>
	.mnDiv {
		margin: 20px auto;
		width: 800px;
		height: 600px;
		display: grid;
		place-items: start center;
		position: relative;
	}
	.mnDiv textarea {
		position: absolute;
		box-sizing: border-box;
		width: 100%; height: 100%;
		padding: 16px;
		font-size: 16px;
	}
</style>

<div class="mnDiv">
	<textarea></textarea>
</div>

【代码解读】

代码中，使用一个div包裹textarea元素，这么做的好处有二：其一，需要改变文本控件尺寸时只需要改变div的尺寸；其二，外围div元素可以有效约束文本控件。

父元素div约束子元素文本控件的关键在于 display 属性的设置，代码中使用了 grid 布局，通过 place-items 属性强制子元素垂直居上、水平居中，这样，不论子元素尺寸如何变化，其中心点永远都会和父元素的中心点重合。至于父子元素的position属性设置则是为了令元素的可控性更强。

【附】

① 禁止textarea元素改变尺寸：resize: none;；
② 使用 flex 弹性布局可以实现相同的效果；
③ 效果演示放在下楼。

马黑黑

效果演示：

红影

原来也可以左右同时变化，只有上边固定，这样的变化可以让元素保持居中。
黑黑的讲述很详细，辛苦了