資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 的 Flexbox 屬性居中一個 <div>？
要使用 CSS 的 flexbox 屬性居中一個 div，我們將使用 CSS flexbox 及其屬性。在本文中，我們將瞭解並執行以下三件事，以使用 CSS 的 Flexbox 屬性居中一個 <div>
使用 flexbox 在水平軸上居中 div
要在水平軸上居中 div，我們將使用 CSS justify-content 屬性，該屬性可水平居中 div。
示例
這是一個在水平軸上居中 div 的示例。
<html>
<head>
<title>
Center a div using flex property
</title>
<style>
.container {
display: flex;
justify-content: center;
}
.item {
border: 2px solid green;
width: 100px;
height: 100px;
background-color: rgb(109, 224, 244);
}
</style>
</head>
<body>
<h3>
Center div Using flexbox on Horizontal Axis
</h3>
<p>
We have used <strong>justify-content</strong>
property to center the item horizontally.
</p>
<div class="container">
<p class="item"></p>
</div>
</body>
</html>
使用 flexbox 在兩個軸上居中 div
要使用 flexbox 在兩個軸上居中 div，我們使用了 CSS justify-content 和 align-items 屬性。
- 我們使用了 "display: flex;" 來建立一個靈活的容器。
- 我們使用了 "justify-content: center;" 來水平居中 div。
- 我們使用了 CSS height 屬性來設定 div 的高度，並使用了 "align-items: center;" 來垂直居中 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 div Using flexbox on both Axes
</h3>
<p>
We have used <strong>justify-content</strong>
to center the item horizontally and
<strong>align-items</strong> to center the
flex item vertically.
</p>
<div class="container">
<p class="item"></p>
</div>
</body>
</html>
使用 Flexbox 居中多個專案
在本節中，我們將使用 flexbox 居中多個 flex 專案。為此，我們使用了 CSS flex-direction 屬性，該屬性根據指定的值顯示 flex 專案。
- 為了對齊多個專案，我們使用了 "flex-direction: column;" 屬性，該屬性垂直顯示 flex 專案。
- 我們居中了多個 flex 專案，並使用 flex-direction: column 將其垂直顯示。還可以使用 flex-direction 的其他屬性值，例如 **row**、**row-reverse** 和 **column-reverse**。
示例
這是一個使用 flexbox 居中多個專案的示例。
<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 <strong>flex-direction</strong>
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>
結論
使用 CSS 居中 div 是一項重要的任務，這是一個非常簡單的過程，可以使用各種 CSS 屬性來實現。在本文中，我們使用了 CSS flexbox 來居中 div。我們執行了以下三件事：使用 CSS **justify-content** 屬性在水平軸上居中 div，使用 **justify-content** 和 **align-items** 屬性在兩個軸上居中 div，以及使用 flexbox 居中多個 flex 專案。
更新於：2024年8月9日
4K+ 次瀏覽
廣告