HTML-使用CSS自动调整文本框大小，同时表单细节保持中心对齐

我不确定这个问题以前是否有人回答过。请告知是否有一种使用CSS的方法，我可以实现将表单元素居中，并且当用户尝试调整页面大小时，对我来说，元素应始终调整到页面大小

---

我需要使用CSS来实现这一点，而不是通过JS

要使表单元素水平居中，即随着浏览器窗口的变宽而变宽，随着浏览器窗口的变薄而变薄，可以使用CSS实现这一点。但是，您需要将其包含在某些内容中，以便进行水平居中

在我的示例中，我使用form元素本身来进行水平居中

---

根据setek答案，您可以使用最小宽度、最大宽度和计算

<form action="#" method="get">
    <textarea cols="40" rows="5"></textarea>
    <input type="text" name="given-name" />
    <input type="text" name="family-name" />
</form>

或

阅读：

<form action="#" method="get">
    <textarea cols="40" rows="5"></textarea>
    <input type="text" name="given-name" />
    <input type="text" name="family-name" />
</form>

form { 
    min-width: 200px;/* set the min width here */
    width: 50%;
    max-width: 400px;/* set the max width here */
    margin: 0 auto; 
}
form textarea, 
form input { 
    width: 100%;
}

form { 
    min-width: 200px;
    width: -webkit-calc(100% -20px);
    width: -moz-calc(100% -20px);
    width: calc(100% -20px);
    max-width: 400px;
    margin: 0 auto; 
}
form textarea, 
form input { 
    width: 100%;
}