方法一：兒子絕對定位或相對定位，這樣兒子脫離標準流，父親有固定寬高，用兒子的margin去擠父親
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 600px;
height: 600px;
background-color: orangered;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
position: absolute;
margin: 200px 150px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
注意：如果兒子沒有絕對定位或相對定位，且父親沒有border，那麼兒子的margin實際上踹的是“流”，踹的是這“行”。如果用margin-top，父親整體也掉下來了。如下：
方法二、如果給父親加一個border，就可以父親，兒子都不定位，用兒子的margin去擠父親，實現兒子居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 600px;
height: 600px;
background-color: orangered;
border: 1px solid white;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
margin: 200px 150px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
方法三、子絕父相（兒子絕對定位，父親相對定位），定位到大盒子的寬高一半的位置，再上下各margin負的自己寬高的一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 600px;
height: 600px;
background-color: orangered;
position: relative;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
方法四、子絕父相，定位到大盒子的寬高一半的位置，再用transform: translate向左向上移動自己寬高的一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 600px;
height: 600px;
background-color: orangered;
position: relative;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
position: absolute;
top: 50%;
left: 50%;
/*用transform向左（上）平移它自己寬度（高度）的50%，也就達到居中效果了*/
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
方法五：絕對佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 600px;
height: 600px;
background-color: orangered;
position: relative;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
方法六：使用table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 600px;
height: 600px;
background-color: orangered;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
display: inline-block;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
display: table-cell;和 vertical-align: middle;兩句實現垂直居中
text-align: center;和display: inline-block;兩句實現水平居中
方法七、用margin： 0 auto;代替text-align: center;和display: inline-block;這兩句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 600px;
height: 600px;
background-color: orangered;
display: table-cell;
vertical-align: middle;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
方法八：利用行高和文本居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 600px;
height: 600px;
background-color: orangered;
text-align: center;
line-height: 600px;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
方法九：使用彈性佈局flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 600px;
height: 600px;
background-color: orangered;
display: flex;
/*水平居中*/
justify-content: center;
/*垂直居中*/
align-items: center;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
上面幾種方法結果都是如下所示：
補充知識點：
絕對定位：
一個絕對定位的元素，如果父輩元素中出現了也定位了的元素，那麼將以父輩這個元素，爲參考點。
工程上，“子絕父相”有意義，父親沒有脫標，兒子脫標在父親的範圍裏面移動。
絕對定位之後，所有標準流的規則，都不適用了。所以margin:0 auto;失效。
display:inline和display:inline-block，會使margin:0 auto;失效。
固定寬度的盒子才能使用margin:0 auto;居中