盒子居中（常用的方法）
想必大家都知道，盒子居中不論在專案中還是在面試題中都是常見的對吧！今天我主要分享四種方法，希望對各位同學有一定的幫助。
場景：
假如這裡有一個父盒子（parent），子盒子（child），我們需要得到的結果是讓子盒子相對父盒子居中，也就是說子盒子在父盒子中居於中間的位置。
盒子居中一般有兩種型別，
1.寬度和高度已經確定的。
2.寬度和高度未確定的。
有四種解決方案：
1.寬度和高度已經知道的
2.寬度和高度不知道的
3.flex佈局
4.css3的方法
1.子盒子的寬度和高度已經知道的
思路：
給父盒子相對定位，給子盒子絕對定位，top:50%,left:50%;
這時我麼發現子盒子相對父盒子並沒有居中，這是因為子盒子本身也是有寬度的，因此我們需要減去子盒子自身的一半。即：margin-left: 負的子盒子寬度的一半；margin-top: 負的子盒子高度的一半；
程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 300px;
height: 300px;
background 2.子盒子的寬度和高度是未知的(這裡需要注意的是，子盒子的寬度和高度其實是有的，只是在不知道的情況下采取這種方式居中)
思考：如果子盒子沒有寬度和高度會出現什麼情況呢？
思路：給父盒子相對定位，給子盒子絕對定位，讓子盒子的top、left、right、bottom都為0，然後來個margin: auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 300px;
height: 300px;
background: #f99;
position: relative;
}
.child {
background: #9ff;
}
/*寬度和高度未確定的*/
/*意思就是說寬度和高度本身是存在的只是自己未知*/
.no-center {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="parent">
父盒子
<div class="child no-center">
我是子盒子
</div>
</div>
</body>
</html>3.flex佈局
思路：利用flex進行居中，不管子盒子的寬度和高度是否知道，只需要給父盒子加一個center類（類名可以隨意）即可。這裡需要注意是給父盒子加這個center類，子盒子才能居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 300px;
height: 300px;
background: #f99;
position: relative;
}
.child {
background: #9ff;
}
/*flex佈局*/
.center {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="parent">
父盒子
<div class="child transform-center">
我是子盒子
</div>
</div>
</body>
</html>4.css3的方法（平移）
思路：利用css3中的translate可以實現盒子居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 300px;
height: 300px;
background: #f99;
position: relative;
}
.child {
background: #9ff;
}
.transform-center {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="parent">
父盒子
<div class="child transform-center">
我是子盒子
</div>
</div>
</body>
</html>其實這四種方法中，比較常用的是第一種和第三種。應該還有其他的方法，歡迎大家補充。