首頁 > 文章 > web前端 > css怎麼設定整體居中

css怎麼設定整體居中

下次还敢原創: 2024-04-25 12:39:15786瀏覽

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

css怎麼設定整體居中

如何使用CSS 設定整體居中

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

align-items 屬性

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

<code class="css">.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"><!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
  </style>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html></code>

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

css flex

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css樣式寫在哪個位置下一篇：css樣式寫在哪個位置

看更多