資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究如何使用 CSS 網格屬性居中一個 <div>？
要使用 CSS 網格 屬性居中一個 div，我們將使用 CSS 網格佈局及其屬性。CSS 網格是 CSS 中最廣泛使用的元素之一，類似於 flexbox。CSS 網格是 Web 上的二維佈局系統。我們可以藉助網格將元素放置在行、列或兩者中。
在本文中，我們將瞭解如何僅使用 CSS 網格屬性來居中 div。我們將為此使用三種方法。
使用 CSS 網格屬性居中 div 的方法
使用 place-items 屬性居中 div
在這種方法中，為了使用 CSS 網格屬性居中 div，我們使用了 "place-items: center;"，它可以居中 div。它可以被認為是 align-items 和 justify-content 屬性的簡寫屬性。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 CSS place-items 屬性來居中 div。
<html>
<head>
<title>
Center a div using CSS properties
</title>
<style>
.container {
display: grid;
place-items: center;
height: 100vh;
}
.item {
border: 2px solid green;
padding: 10px;width: 100px;
height: 100px;
background-color: rgb(109, 224, 244);
}
</style>
</head>
<body>
<h3>
Center item using grid properties.
</h3>
<p>
We have used CSS <strong>place-items
</strong> property to center the div.
</p>
<div class="container">
<p class="item"></p>
</div>
</body>
</html>
使用 grid-row 和 grid-column 屬性居中 div
我們使用了 grid-row 和 grid-column 屬性，它們可以居中 div。我們使用了以下步驟來居中 div
- 我們使用了 "grid-template-rows" 和 "grid-template-columns"，它們定義了三行三列，其中第一行和第三行以及第一列和第三列佔據可用空間的一部分，第二行和第二列設定為自動。
- 我們使用了 "grid-row: 2;"，它將 div 放置在網格的第二行。
- 我們使用了 "grid-column: 2;"，它將 div 放置在網格的第二列。
- 我們使用了 background-color、border、height 和 width 屬性來設定 div 元素的樣式。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 CSS grid-row 和 grid-column 屬性來居中 div。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Center Div with CSS Grid</title>
<style>
.container {
display: grid;
grid-template-rows: 1fr auto 1fr;
grid-template-columns: 1fr auto 1fr;
height: 100vh;
}
.item {
grid-row: 2;
grid-column: 2;
width: 100px;
height: 100px;
background-color: rgb(109, 224, 244);
border: 2px solid green;
}
</style>
</head>
<body>
<h3>
Center Item Using grid Property.
</h3>
<p>
We have used CSS <strong> grid-row
</strong> and <strong>grid-column
</strong> property to center the div.
</p>
<div class="container">
<p class="item"></p>
</div>
</body>
</html>
使用 place-self 屬性居中 div
在這種方法中，我們使用了 place-self 屬性，它可以同時水平和垂直居中 div。它可以用作 align-self 和 justify-self 屬性的簡寫屬性。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 CSS place-self 屬性來居中 div。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Center div using place-self
</title>
<style>
.container {
display: grid;
height: 100vh;
}
.item {
place-self: center;
width: 100px;
height: 100px;
background-color: rgb(109, 224, 244);
border: 2px solid green;
}
</style>
</head>
<body>
<h3>
Center Item Using grid Property.
</h3>
<p>
We have used CSS <strong>place-self
</strong> property to center the div.
</p>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>
結論
使用 CSS 居中 div 是一項重要的任務，這是一個非常簡單的過程，可以使用各種 CSS 屬性來實現。在本文中，我們使用了 CSS 網格佈局，使用三種不同的方法來居中 div，分別是使用 **place-items** 屬性、**grid-row 和 grid-column** 屬性以及 **place-self** 屬性。
19K+ 次瀏覽
