css中盒子居中怎麼設置

在CSS 中，可以採用多種方法實現盒子居中：水平居中：margin: 0 auto;垂直居中：vertical-align: middle;水平和垂直居中：display: flex; justify-content: center ; align-items: center;

CSS 中盒子居中設定

水平居中

• margin: 0 auto;：這是最常用的方法，它將盒子水平居中對齊父元素。
• text-align: center;：僅將盒子內的文字置中對齊。

垂直居中

• vertical-align: middle;：將盒子在垂直方向上置中對齊父元素。
• line-height: 設定盒子高度，使盒子內的文字垂直居中。 （適用於單行文字）
• display: flex; align-items: center;：使用 flexbox 佈局，將盒子垂直居中對齊父元素。 （適用於多行文字）

水平和垂直居中

• #transform: translate(-50%, -50%) ;：使用CSS transform 來將盒子同時水平和垂直居中對齊。
• display: flex; justify-content: center; align-items: center;：使用 flexbox 佈局，將盒子同時水平和垂直居中對齊。

範例程式碼：

<code class="css">.container {
  width: 200px;
  height: 100px;
  margin: 0 auto;  /* 水平居中 */
  text-align: center;  /* 文本水平居中 */
  vertical-align: middle;  /* 垂直居中 */
}</code>

以上是css中盒子居中怎麼設置的詳細內容。更多資訊請關注PHP中文網其他相關文章！