Ⅰ 方法一：使用定位的方法（如下圖）
（我把我的樣式代碼粘貼到下邊了）
.bg-box {width: 200px;height: 200px;margin:30px auto;border: 1px solid red;position:relative;}
.sm-box {width: 100px;height: 100px;border: 1px solid red;background: red;position:absolute酌伊； top: 50%;left:50%;margin-top: -50px; /這里是小盒子高的一半/margin-left: -50px; /這里是小盒子寬的一半/}
Ⅱ 方法二:利用定位及margin:auto實(shí)現(xiàn)（如下圖）
（我把我的樣式代碼粘貼到下邊了）
.bg-box {width: 200px;height: 200px;margin:30px auto;border: 1px solid red;position:relative;}
.sm-box {width: 100px;height: 100px;border: 1px solid red;background: red;position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;}
Ⅲ 使用display:table-cell; （如下圖）
（我把我的樣式代碼粘貼到下邊了）
.bg-box {width: 200px昭雌； height: 200px;border: 1px solid red;display: table-cell;vertical-align: middle;text-align: center;}
.sm-box { width: 100px芜茵；height: 100px;border: 1px solid red;background: red; display: inline-block; }
Ⅳ 方法四:使用伸縮布局display:flex像樊；（如下圖）
（我把我的樣式代碼粘貼到下邊了）
.bg-box { width: 200px;height: 200px;border: 1px solid red;display: flex; justify-content: center; /水平居中/ align-items: center; /垂直居中/ }
.sm-box {width: 100px;height: 100px;border: 1px solid red; background: red;}
Ⅴ 計(jì)算四周的間距設(shè)置子元素與父元素之間的margin-top和margin-left;（如下圖）
（我把我的樣式代碼粘貼到下邊了）
.bg-box { width: 200px;height: 200px;border: 1px solid red; }
.sm-box { width: 100px;height: 100px;border: 1px solid red; background: red; margin-top: 50px; margin-left: 50px; }
