資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 居中 div 元素？
使用 CSS 居中 div 元素是前端開發中最重要的方面之一，可以透過多種 CSS 屬性實現。
在本文中，我們使用了 5 種方法來使用 CSS 居中 div。我們有一些父 div 元素和一些子 p 元素，我們的任務是使用 CSS 居中 div 元素。
使用 CSS 居中 div 元素的方法
以下列出了本文將討論的使用 CSS 居中 div 元素的方法，並附帶分步說明和完整的示例程式碼。
使用 margin 屬性居中 div
在這種方法中，我們使用了 margin 屬性來使用 CSS 居中 div。CSS margin 屬性在元素的外圍建立空間。此方法水平居中 div。
- 我們使用了 “margin-left: auto;” 和 “margin-right: auto;” 屬性，它們將左右邊距設定為自動，從而使 div 居中。
- 我們使用了 “margin-inline: auto;” 屬性，它是 margin-left 和 margin-right 屬性的替代方法。
示例
這是一個完整的示例程式碼，實現了上述使用 margin 屬性使用 CSS 居中 div 的步驟。
<html>
<head>
<title>
Center a div using margin Properties
</title>
<style>
div {
border: 2px solid green;
padding: 10px;
}
.ele {
width: 100px;
height: 100px;
background-color: rgb(109, 224, 244);
}
.ele1 {
margin-left: auto;
margin-right: auto;
}
.ele2 {
margin-inline: auto;
}
</style>
</head>
<body>
<h3>
Center a div using margin properties.
</h3>
<h4>Using margin-left and margin-right Property</h4>
<div class="ele ele1">
</div>
<br>
<h4>Using margin-inline Property</h4>
<div class="ele ele2">
</div>
</body>
</html>
使用 flex 屬性居中 div
在這種方法中，我們使用了 CSS flex 屬性來居中 div。我們將在示例 1 中居中單個 flex 專案，並在示例 2 中居中多個 flex 專案。
- 我們使用了 “display: flex;” 來建立彈性容器。
- 我們使用了 “justify-content: center;” 來水平居中 div。
- 我們使用了 CSS height 屬性來設定 div 的高度，並使用 “align-items: center;” 垂直居中 div。
- 對於對齊多個專案，我們使用了 “flex-direction: column;” 屬性，它垂直顯示 flex 專案。
示例 1
在此示例中，我們使用 justify-content 和 align-items 屬性居中了一個 div。
<html>
<head>
<title>
Center a div using flex property
</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.item {
border: 2px solid green;
width: 100px;
height: 100px;
background-color: rgb(109, 224, 244);
}
</style>
</head>
<body>
<h3>
Center single div item using
flex properties.
</h3>
<p>
We have used justify-content to center the
item horizontally and align-items to center the
item vertically.
</p>
<div class="container">
<p class="item"></p>
</div>
</body>
</html>
示例 2
在此示例中，我們居中了多個 flex 專案，並使用 flex-direction:column 垂直顯示它們。還可以使用 flex-direction 的其他屬性值，如 **row**、**row-reverse** 和 **column-reverse**。
<html>
<head>
<title>
Center a div using CSS properties
</title>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.item {
padding:10px;
background-color: #04af2f;
color: white;
margin: 2px;
text-align: center;
letter-spacing: 1px;
border: 1px solid black;
}
</style>
</head>
<body>
<h3>
Center Multiple Items Using flex Property.
</h3>
<p>
We have used flex-direction property to
display items vertically.
</p>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
使用 grid 屬性居中 div
在這種方法中，我們使用了三種不同的 CSS grid 佈局來居中 div 元素，如下所示。CSS grid 佈局非常適合建立網頁的整體佈局。
使用 place-items 屬性
我們使用了 “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 屬性
我們使用了 grid-row 和 grid-column 屬性來居中 div。我們使用了以下步驟來居中 div
- 我們使用了 “grid-template-rows” 和 “grid-template-columns” 定義了三行三列，其中第一行和第三行以及第一列和第三列佔據可用空間的一部分，第二行和第二列設定為自動。
- 我們使用了 “grid-row: 2;” 將 div 放置在網格的第二行。
- 我們使用了 “grid-column: 2;” 將 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 屬性
我們使用了 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>
在視口中居中 div
在這種方法中，我們居中了不在 div 容器內的 div 元素。
- 我們使用了 “position:fixed” 屬性來固定視口中的 div。
- 然後，我們使用了 “inset: 0px;” 屬性，它是設定 CSS top、left、right 和 bottom 屬性的簡寫屬性。
- 最後，我們使用了 “margin: auto;” 屬性，它與上述兩個屬性一起居中 div 元素。
示例
這是一個完整的示例程式碼，實現了上述在視口中居中 div 的步驟。
<html>
<head>
<title>
Center a div using CSS properties
</title>
<style>
.container {
position: fixed;
width: 10rem;
height: 5rem;
background-color: rgb(109, 224, 244);
border: 2px solid green;
inset: 0px;
margin: auto;
padding:5px;
}
</style>
</head>
<body>
<h3>
Centering item inside viewport.
</h3>
<div class="container">
</div>
</body>
</html>
使用 CSS 屬性居中文字
在這種方法中，我們使用了上述方法來居中 flex 專案，並使用 text-align 屬性將文字內容放置在中央。
- 我們使用了 “text-align: center;” 來居中 div 內的文字，並使用上述方法使用 flex 屬性居中 div。
示例
這是一個完整的示例程式碼，實現了上述使用 CSS text-align 屬性居中文字的步驟。
<html>
<head>
<title>
Centering text
</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}
p {
border: 2px solid green;
padding: 10px;
width: 150px;
}
</style>
</head>
<body>
<h3>
Center Text with flex box
Using text-align Property.
</h3>
<div class="container">
<p>
In this example, we have placed
text at the center along with the div.
</p>
</div>
</body>
</html>
結論
使用 CSS 居中 div 是一項重要的任務，也是一個非常簡單的過程，可以透過多種 CSS 屬性實現。在本文中，我們使用了五種方法，分別是使用 **margin** 屬性、使用 **flex** 屬性、使用 **grid** 佈局、在視口中居中以及最後使用 **text-align** 屬性居中文字。可以根據使用者的需求使用任何一種方法。
12K+ 閱讀量
