目錄：
1、水平居中
2、垂直居中
塊級標簽：設置 margin : 0 auto
行內標簽：設置 text-align : center
行內-塊級標簽：設置 text-align : center
塊級標簽水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
width: 350px;
height: 200px;
background-color: red;
margin: 20px;
}
.test1{
background-color: greenyellow;
width: 150px;
height: 40px;
}
</style>
</head>
<body>
<div id="box">
<div class="test1">我是塊級元素</div>
</div>
</body>
</html>
現在讓綠色的塊級標簽水平居中，同時讓綠色塊級標簽的文字內容水平居中。
設置 text-align 實現了塊級標簽內的文字水平居中：
計算大div寬度跟小div寬度，然后設置 margin-left 實現綠色的塊級標簽水平居中：
實現了。但是，如果使用這種方式，一旦改變了大 div 的 width 或者小 div 的 width，就要重新計算 margin-left。
使用自適應的方法更好。
也可以把 text-align 寫到 test1 樣式里。
之所以寫到 box 樣式里也可以是因為 text-align 是可以被繼承的。在子盒子里找不到就回到父盒子里面找 text-align。
行內-標簽水平居中
margin : 0 auto 只在塊級標簽上好使。在行內標簽上不好使。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
width: 350px;
height: 200px;
background-color: red;
margin: 20px;
}
span{
background-color: skyblue
}
</style>
</head>
<body>
<div id="box">
<span>我是行內標簽</span>
</div>
</body>
</html>
讓它水平居中：
行內塊級標簽水平居中
讓它水平居中：
塊級標簽：
行內標簽：在父盒子樣式中設置 line-height 等於 父盒子 height
行內-塊級標簽：在父盒子樣式中設置 line-height 等於 父盒子 height
行內標簽垂直居中
需要先了解 line-height 。
實現垂直居中前：
實現垂直居中：
實現了垂直居中。
下面來了解一下 line-height，舉幾個例子來了解一下。
分別設置 line-height 為以下值，行內標簽的位置分別在：
line-height : 200px
line-height : 100px
line-height : 300px
行內-塊級標簽垂直居中
實現垂直居中前：
實現垂直居中：
塊級標簽居中
實現垂直居中前：
想要實現垂直居中，如果只設置 line-height 會出現這樣的效果：
Q ：為什么塊級標簽沒有垂直居中，塊級標簽內的文字在父盒子中垂直居中了？
A ： 因為 line-height 也是可以被繼承的，子盒子中沒有 line-height, 但是父盒子中有line-height，子盒子就繼承了 line-height。
Q ：如果想要文字在子盒子中垂直居中怎么辦？
A ： 在子盒子里面重寫 line-height
實現盒子居中布局有2種方式：方式1：定位；方式2：伸縮布局
方式1：定位
要遵循 “ 子絕父相 ” 的原則。子標簽絕對定位，父標簽相對定位。
這時子盒子左上角與父盒子中心點重合，需要讓子盒子中心點到父盒子中心點。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
width: 350px;
height: 200px;
background-color: red;
margin: 20px;
line-height: 200px;
/*父相*/
position: relative;
}
.test1{
background-color: greenyellow;
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
/*子絕*/
position: absolute;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top: -20px;
}
</style>
</head>
<body>
<div id="box">
<div class="test1">我是塊級元素</div>
</div>
</body>
</html>
實現了垂直居中。