CSS盒子水平居中
比如有一個DIV盒子，如果不給任何樣式，默認的寬度是和瀏覽器一樣寬的（如下圖所示）。
那麼若要讓盒子裏面的內容居中對齊，我們可以設定如下樣式：
div {
text-align: center;
}
這裏的內容包括文字、行內元素、行內塊元素。
盒子本身是可以指定寬度和高度的，我們可以設定如下樣式：
div {
text-align: center;
width: 300px;
height: 100px;
background-color: deeppink;
}
這裏我們可以發現盒子裏面的內容對於盒子而言是居中對齊的，但是盒子本身對於頁面而言卻不是居中對齊的。
接下來就是本節需要介紹的——如何讓盒子水平居中？
可以在樣式中如下進行設置：
div {
text-align: center;
width: 300px;
height: 100px;
background-color: deeppink;
margin: 0 auto; /*上下是0，左右是自動*/
}
或者
div {
text-align: center;
width: 300px;
height: 100px;
background-color: deeppink;
margin-left: auto;
margin-right: auto;
}
或者
div {
text-align: center;
width: 300px;
height: 100px;
background-color: deeppink;
margin: auto;
}
上述三種方式效果都是一樣的，所以以後我們見到了千萬不要慌張。
總結1：
- 文字水平居中我們用 text-align: center;
- 盒子水平居中我們用 margin: 0 auto;
總結2：
可以讓一個盒子實現水平居中，需要滿足以下兩個條件：
- 1、必須是塊級元素；
- 2、盒子必須指定寬度（Width）；
實際工作中常用這種方式進行網頁的佈局。
【完整樣式代碼】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子水平居中</title>
<style>
div {
text-align: center; /*盒子的內容居中對齊*/
width: 300px;
height: 100px;
background-color: deeppink;
margin: 0 auto; /*上下是0，左右是自動*/
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div>
盒子
</div>
</body>
</html>