如何在 HTML 和 CSS 中使 Div 居中？
- PHPz原創
- 2024-07-17 19:47:12780瀏覽
雖然這是 Web 開發中的典型活動，但將 div 居中對於新手來說可能很困難。理解使 div 水平、垂直或兩者居中的多種技術至關重要。這篇文章將引導您完成多種方法來完成此任務，並附有解釋和程式碼範例。
簡介
製作美觀且平衡的設計的一個重要組成部分是將網頁上的元件居中。無論您建立的使用者介面有多複雜，即使對於簡單的網頁，能夠將 div 置中也是至關重要的。這篇文章將討論在 HTML 和 CSS 中將 div 置中的多種方法（包括傳統方法和前沿方法）。
為什麼要讓 Div 居中？
將 div 置中可以增強網頁的版面和可讀性。它有助於創建平衡的設計並確保用戶可以輕鬆存取內容。無論是文字方塊、圖像還是表單，將這些元素居中可以讓您的網站看起來更加專業和有條理。
使 Div 居中的方法
在 HTML 和 CSS 中，有多種方法可以讓 div 居中。我們將介紹以下技術：
使用邊距：自動；
使用 Flexbox
使用網格佈局
使用 CSS 轉換
使用文字對齊
使用部位和負保證金
每種方法都有其優點和用例。讓我們透過詳細的解釋和程式碼範例來深入研究每一個。
- 使用邊距：自動；
邊距：自動；方法是讓 div 水平居中最簡單的方法之一。它的工作原理是將左右邊距設為 auto，從而均勻分佈 div 兩側的可用空間。
水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a Div Horizontally</title>
<style>
.center-horizontally {
width: 50%;
margin: 0 auto;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="center-horizontally">
This div is centered horizontally.
</div>
</body>
</html>
在上面的範例中，div 使用 margin: 0 auto; 水平居中。 div 的寬度設定為 50%，因此它佔據了一半的可用空間，兩側邊距相等。
垂直居中
要使用 margin: auto; 讓 div 垂直居中，您需要設定父容器和 div 本身的高度。這種方法不像水平居中那麼簡單。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a Div Vertically</title>
<style>
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.center-vertically {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="center-vertically">
This div is centered vertically.
</div>
</div>
</body>
</html>
在此範例中，我們使用 Flex 容器將 div 垂直居中。高度：100vh；確保容器佔據視窗的整個高度。顯示：flex;、justify-content:center;、align-items:center;屬性在容器內水平和垂直對齊 div。
- 使用 Flexbox
Flexbox 是一種現代佈局模型，提供了一種在容器中的項目之間對齊和分配空間的有效方法。它簡化了元素水平和垂直居中的過程。
水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a Div Horizontally with Flexbox</title>
<style>
.flex-container {
display: flex;
justify-content: center;
}
.center-flex-horizontally {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="center-flex-horizontally">
This div is centered horizontally with Flexbox.
</div>
</div>
</body>
</html>
在此範例中，我們使用 Flexbox 使 div 水平居中。顯示器：柔性；並調整內容：中心；容器的屬性確保 div 居中。
垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a Div Vertically with Flexbox</title>
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.center-flex-vertically {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="center-flex-vertically">
This div is centered vertically with Flexbox.
</div>
</div>
</body>
</html>
在此範例中，我們使用 Flexbox 使 div 垂直居中。對齊項目：居中；容器的屬性確保 div 在容器內垂直居中。
水平和垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a Div with Flexbox</title>
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.center-flex {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="center-flex">
This div is centered both horizontally and vertically with Flexbox.
</div>
</div>
</body>
</html>
在此範例中，我們同時使用 justify-content: center;和對齊項目：居中；將 div 在容器內水平和垂直居中。
- 使用網格佈局
CSS 網格佈局是另一個強大的佈局系統，可讓您輕鬆建立複雜的佈局。它提供了一種將元素居中的簡單方法。
水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a Div Horizontally with Grid</title>
<style>
.grid-container {
display: grid;
place-items: center;
height: 100vh;
}
.center-grid-horizontally {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="center-grid-horizontally">
This div is centered horizontally with Grid.
</div>
</div>
</body>
</html>
在此範例中，我們使用 CSS 網格佈局將 div 水平居中。地點項目：中心；屬性使 div 水平和垂直居中，但由於我們專注於水平居中，因此它達到了預期的結果。
垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a Div Vertically with Grid</title>
<style>
.grid-container {
display: grid;
place-items: center;
height: 100vh;
}
.center-grid-vertically {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="center-grid-vertically">
This div is centered vertically with Grid.
</div>
</div>
</body>
</html>
在此範例中，我們使用 CSS 網格佈局將 div 垂直居中。地點項目：中心；屬性使 div 水平和垂直居中。
水平和垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a Div with Grid</title>
<style>
.grid-container {
display: grid;
place-items: center;
height: 100vh;
}
.center-grid {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="center-grid">
This div is centered both horizontally and vertically with Grid.
</div>
</div>
</body>
</html>
在此範例中，位置項目：center；屬性使 div 在容器內水平和垂直居中。
- 使用 CSS 轉換
CSS Transform 讓您可以操縱元素的外觀和位置。您可以使用變換屬性將 div 居中。
水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a Div Horizontally with Transform</title>
<style>
.center-transform-horizontally {
width: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="center-transform-horizontally">
This div is centered horizontally with Transform.
</div>
</body>
</html>
在此範例中，左側：50%；和變換：translateX(-50%)；屬性使 div 水平居中。位置：絕對；屬性相對於其最近的定位祖先定位 div。
垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a Div Vertically with Transform</title>
<style>
.center-transform-vertically {
width: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="center-transform-vertically">
This div is centered vertically with Transform.
</div>
</body>
</html>
In this example, the top: 50%; and transform: translateY(-50%); properties center the div vertically. The position: absolute; property positions the div relative to its nearest positioned ancestor.
Centering Both Horizontally and Vertically
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a Div with Transform</title>
<style>
.center-transform {
width: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="center-transform">
This div is centered both horizontally and vertically with Transform.
</div>
</body>
</html>
In this example, the top: 50%;, left: 50%;, and transform: translate(-50%, -50%); properties center the div both horizontally and vertically. The position: absolute; property positions the div relative to its nearest positioned ancestor.
- Using Text-Align
The text-align property is often used to center text, but it can also be used to center block elements within a container.
Horizontal Centering
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a Div Horizontally with Text-Align</title>
<style>
.container {
text-align: center;
}
.center-text-align {
display: inline-block;
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="center-text-align">
This div is centered horizontally with Text-Align.
</div>
</div>
</body>
</html>
In this example, the container has text-align: center;, and the div has display: inline-block;. This centers the div horizontally within the container.
- Using Position and Negative Margin
Using position and negative margins is another method to center a div both horizontally and vertically.
Centering Both Horizontally and Vertically
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a Div with Position and Negative Margin</title>
<style>
.center-position {
width: 50%;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; /* Half of the height */
margin-left: -25%; /* Half of the width */
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="center-position">
This div is centered both horizontally and vertically with Position and Negative Margin.
</div>
</body>
</html>
In this example, the top: 50%; and left: 50%; properties position the div in the middle of the container. The margin-top: -100px; and margin-left: -25%; properties center the div by offsetting it by half of its height and width, respectively.
Conclusion
Centering a div in HTML and CSS can be accomplished using various methods. Each technique has its strengths and is suitable for different scenarios. Whether you choose to use margin: auto;, Flexbox, Grid Layout, CSS Transform, Text-Align, or Position and Negative Margin, understanding these methods will help you create balanced and visually appealing designs.
By mastering these techniques, you can enhance the layout and readability of your web pages, making them more user-friendly and professional. Experiment with these methods to find the one that best suits your needs and the specific requirements of your projects.
References
MDN Web Docs - CSS: Cascading Style Sheets
CSS-Tricks - A Complete Guide to Flexbox
CSS-Tricks - A Complete Guide to Grid
W3Schools - CSS
MDN Web Docs - Using CSS Flexible Boxes
MDN Web Docs - CSS Grid Layout
By following this guide, you can center a div with confidence, regardless of the complexity of your layout. Happy coding!
以上是如何在 HTML 和 CSS 中使 Div 居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！