HTML 是網頁設計中最常用的標記語言之一，而居中顯示也是網頁設計中最基本的顯示方式之一。本篇文章將介紹如何使用 HTML 在網頁中設定居中顯示。
一、水平居中
1.1 使用文字對齊屬性
可以使用 text-align 屬性來對 HTML 元素進行水平居中。此屬性可設定在父元素上，使其中的子元素實作水平居中。
範例程式碼：
<!doctype html>
<html>
<head>
<style>
.container {
text-align: center;
}
</style>
<head>
<body>
<div class="container">
<p>这是一段文字</p>
</div>
</body>
</html>1.2 使用 margin 屬性
也可以使用 margin 屬性來實作水平居中。需要注意的是，此方法只適用於具有固定寬度的元素。
範例程式碼：
<!doctype html>
<html>
<head>
<style>
.container {
width: 500px;
margin: 0 auto;
}
</style>
<head>
<body>
<div class="container">
<p>这是一段文字</p>
</div>
</body>
</html>二、垂直居中
2.1 使用文字對齊屬性
如果需要在HTML 元素中實作垂直居中，在父元素上可以設定display: table 屬性，而在子元素上設定display: table-cell 和vertical-align: middle 屬性。
範例程式碼：
<!doctype html>
<html>
<head>
<style>
.container {
display: table;
height: 500px;
width: 100%;
background-color: gray;
}
.inner {
display: table-cell;
vertical-align: middle;
}
</style>
<head>
<body>
<div class="container">
<div class="inner">
<p>这是一段文字</p>
</div>
</div>
</body>
</html>2.2 使用 flex 屬性
#另外一個實作垂直居中的方法是使用 flex 屬性。父元素上設定 display: flex，而子元素設定 align-items: center 和 justify-content: center 屬性即可實現垂直居中。
範例程式碼：
<!doctype html>
<html>
<head>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 500px;
width: 100%;
background-color: gray;
}
</style>
<head>
<body>
<div class="container">
<p>这是一段文字</p>
</div>
</body>
</html>這兩種方法都可以輕鬆實現在 HTML 中進行居中顯示。需要注意的是，在使用 margin 屬性進行水平居中時，必須指定一個固定的寬度，並將 margin 屬性的左右值設為 auto，以實現居中顯示。
總結：
本文介紹了兩種水平居中和兩種垂直居中的方法，其中text-align 和margin 屬性適用於水平居中，而display: table、display: flex 和vertical-align 屬性適用於垂直居中。無論是哪種方法，都能夠輕鬆地實現在 HTML 中進行居中顯示。
以上是html設定居中顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！
