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;
}
```
