概念：
水平居中佈局 指的是當前元素在父級元素容器中，水平方向是居中顯示的。
方案一： inline-block + text-align
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中佈局</title>
<style>
#parent {
width: 100%;
height: 200px;
background-color: #ccc;
text-align: center;
}
#child {
width: 200px;
height: 200px;
background: orangered;
display: inline-block;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
</html>優缺點
優點：瀏覽器相容性好。程式碼中使用的均是 CSS 2 中的屬性，瀏覽器相容性良好。
缺點：text-align 具有繼承性。子元素中的文字會繼承父元素的 text-align 屬性。若子元素中的文字不是居中顯示時，則需要重新設定 text-align 屬性將其覆蓋。
方案二：table + margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中佈局</title>
<style>
#parent {
background-color: #ccc;
}
#child {
width: 200px;
height: 200px;
/* display 的值為 block 和 table */
display: table;
/*
margin 屬性:外邊距
* 一個值 - 上右下左
* 二個值 - 第一個值表示上下，第二個值表示左右
* auto 瀏覽器自動計算(等分)
* 三個值 - 第一個值表示上，第二個值表示左右，第三個值表示下
* 四個值 - 上右下左
*/
margin: 0 auto;
background: orangered;
}
</style>
</head>
<body>
<!--定位父級元素-->
<div id="parent">
<!--定位子級元素-->
<div id="child"></div>
</div>
</body>
</html>優缺點
優點：只需要對子元素設定就可以顯示水平居中佈局效果。
缺點：如果子元素脫離文件流，導致 margin 屬性的值失效。
方案三：absolute + transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中佈局</title>
<style>
#parent {
width: 100%;
height: 200px;
background-color: #ccc;
/* 開啟定位 */
position: relative;
}
#child {
width: 200px;
height: 200px;
background: orangered;
/*
當把當前元素設定為絕對定位後:
*如果父級元素沒有開啟定位，當前元素相對於頁面定位，
*如果父級元素開啟了定位的話，當前元素相對於父級元素定位
*/
position: absolute;
left: 50%; /* 子級元素相對於父級元素的左邊 50% */
transform: translateX(-50%);
}
</style>
</head>
<body>
<!--定位父級元素-->
<div id="parent">
<!--定位子級元素-->
<div id="child"></div>
</div>
</body>
</html>優缺點
優點：父級元素是否脫離文件流，不影響子級元素居中顯示效果。
缺點：transform 屬性是 CSS 3 中新增的屬性，瀏覽器支援情況不好。
本作品採用《CC 協議》，轉載必須註明作者和本文連結