效果图
方法一：利用定位（常用方法，推荐使用）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {position: relative;width: 500px;height: 500px;background-color: red;}.son {position: absolute;width: 100px;height: 100px;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;background-color: blue;}</style></head><body><div class="father"><div class="son"></div></div></body></html>
方法二：利用margin：auto
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {position: relative;width: 500px;height: 500px;background-color: red;}.son {position: absolute;width: 100px;height: 100px;margin: auto;left: 0;right: 0;top: 0;bottom: 0;background-color: blue;}</style></head><body><div class="father"><div class="son"></div></div></body></html>
方法三：利用display：table-cell
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 500px;height: 500px;background-color: red;display: table-cell;vertical-align: middle;text-align: center;}.son {width: 100px;height: 100px;display: inline-block;background-color: blue;}</style></head><body><div class="father"><div class="son"></div></div></body></html>
方法四：利用display：flex
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {display: flex;justify-content: center;align-items: center;width: 500px;height: 500px;background-color: red;}.son {width: 100px;height: 100px;background-color: blue;}</style></head><body><div class="father"><div class="son"></div></div></body></html>
方法五：计算父盒子与子盒子的空间距离（这跟方法一是一个道理）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 500px;height: 500px;background-color: red;overflow: hidden;}.son {width: 100px;height: 100px;margin-left: 200px;margin-top: 200px;background-color: blue;}</style></head><body><div class="father"><div class="son"></div></div></body></html>
方法六：利用transform
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {position: relative;width: 500px;height: 500px;background-color: red;}.son {position: absolute;width: 100px;height: 100px;left: 50%;top: 50%;transform: translate(-50%, -50%);background-color: blue;}</style></head><body><div class="father"><div class="son"></div></div></body></html>
