在 html 中設置盒子居中，可以使用以下方法：水平居中：text-align: center;margin: 0 auto;垂直居中：vertical-align: middle;display: flex; align-items: center;兩個維度居中：display: flex; justify-content: center; align-items: center;
如何在 HTML 中設置盒子居中
在 HTML 中設置盒子居中是常見且有用的任務。有幾種方法可以實現這一點，具體取決于要對齊的元素類型以及所需的居中方式。
水平居中
水平居中是指使盒子水平對其父元素居中。有兩種常用的方法：
text-align: center;：這會將文本內容水平居中在一個塊級元素中。
margin: 0 auto;：這會將塊級元素水平居中在父元素中。
例如：
<code class="html"><div style="text-align: center;"> <p>Hello, world!</p> </div></code>
登錄后復制
垂直居中
垂直居中是指使盒子垂直對其父元素居中。有兩種常用的方法：
vertical-align: middle;：這會將行內元素（如圖像或文本）垂直居中在父元素中。
display: flex; align-items: center;：這會將塊級元素垂直居中在父元素中。
例如：
<code class="html"><div style="display: flex; align-items: center;"> <img src="image.jpg" style="max-width:90%" alt="html怎么設置盒子居中" > </div></code>
登錄后復制
兩個維度居中
要同時水平和垂直居中一個盒子，可以使用 flexbox，如下所示：
<code class="html"><div style="display: flex; justify-content: center; align-items: center;"> <div>Box</div> </div></code>
登錄后復制
