如何在 HTML 中居中任何元素 [重复]答案

【问题标题】：How to center any element in HTML [duplicate]如何在 HTML 中居中任何元素 [重复]
【发布时间】：2020-01-03 13:01:32
【问题描述】：

我想将textarea 元素居中，但margin: 0 auto 无法正常工作。

我还尝试将元素包装在具有margin: 0 auto 样式的div 中。

<div style="margin: 0 auto;">
    <textarea rows="4" cols"100"></textare>
</div>

【问题讨论】：

</textare> 包含拼写错误，并且自动边距仅适用于具有设定宽度的块级元素。
在 div 样式中添加 text-align: center
谢谢，我只是提供这个问题的目的是为了简化其他开发人员的工作.. 查看答案
添加有用的自我回答问题很棒，但理想情况下，它应该只针对尚未涵盖的问题。请参阅此内容或其他有关居中的一千个问题：stackoverflow.com/questions/114543/…

标签： html css

【解决方案1】：

您可以使用 display: flex 和 justify-content: center; 来完成此操作

<div style="display:flex; justify-content:center;">
    <textarea rows="4" cols"100"></textare>
</div>

【讨论】：

【解决方案2】：

如果你想以 HTML 为中心，你可以选择：

<center>
    <h2>How Not to Center with HTML</h2>
</center>

此文本可能居中...但您最好使用 CSS 将网页上的文本或其他元素居中。像这样：

HTML：

<div class="center">
    <p>Some centered text</p>
</div>

CSS：

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

【讨论】：

【解决方案3】：

将 div 设置为 display: table; 这允许 div 占用 textarea 的宽度，而不是占用width:100%;

这应该可以解决它：

  <div style="margin: 0 auto; display:table;">
	   <textarea rows="4" cols="100">
	   </textarea>
    </div>

我还注意到您的问题有一些拼写错误，这不会呈现正确的 HTML。它应该是“textarea”而不是“textare”。也请更正它们，应该很好。

【讨论】：

【解决方案4】：

有一个棘手的解决方案：您应该将元素包含在wrapper 元素中，该元素具有style="text-align: center"，元素样式应为display: inline-block

<div style="text-align: center">
    <textarea rows="4" cols="100"></textarea>
</div>

【讨论】：