1.使用margin: 0 auto居中
```
.f{
width: 200px;
height: 200px;
}
.z{
width: 100px;
height: 100px;
margin: 0 auto;
}
```
2.使用margin計算左右邊距
```
.f{
width: 200px;
height: 200px;
}
.z{
width: 100px;
height: 100px;
margin-left: 50px;
}
```
3.先讓盒子的左右邊緣和父盒子的水平中心線重疊,然后讓子盒子往回移動自身寬度的一半
```
.f{
width: 200px;
height: 200px;
position: relative;
}
.z{
width: 100px;
height: 100px;
position: absolute;
margin-left: 100px;
left: -50px;
}
```
4.把盒子轉換成行內快,然后使用text-align屬性使盒子水平居中
```
.f{
width: 200px;
height: 200px;
text-align: center;
}
.z{
width: 100px;
height: 100px;
display: inline-block;
}
```