日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

使用 css 實現整體居中：設置 align-items: center 進行垂直居中。設置 justify-content: center 進行水平居中。同時設置 align-items 和 justify-content 屬性可將整體居中。

如何使用 CSS 設置整體居中

在網頁設計中，有時需要將所有內容居中對齊，這可以通過使用 CSS 的 align-items 和 justify-content 屬性來實現。

align-items 屬性

align-items 屬性用于設置容器中項目（flex item）的垂直對齊方式。如果將 align-items 設置為 center，則項目將垂直居中：

<code class="&lt;a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css"&gt;.container {
  display: flex;
  align-items: center;
}</code>

登錄后復制

justify-content 屬性

justify-content 屬性用于設置容器中項目（flex item）的水平對齊方式。如果將 justify-content 設置為 center，則項目將水平居中：

<code class="css">.container {
  display: flex;
  justify-content: center;
}</code>

登錄后復制

將整體居中

要將整體居中，需要同時設置 align-items 和 justify-content 屬性：

<code class="css">.container {
  display: flex;
  align-items: center;
  justify-content: center;
}</code>

登錄后復制

示例

以下示例演示了如何使用 CSS 將網頁中的所有內容居中：

<code class="html">


  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
  </style>
<h1>Hello, world!</h1>

</code>

登錄后復制