如何让一个有宽高的盒子垂直居中
1.利用盒子宽高和margin
<html><head><style type="text/css">*{padding: 0;margin: 0;list-style: none;}.fu{width: 750px;height: 600px;border: 1px solid gray;background-color: antiquewhite;}.son{width: 300px;height: 200px;border: 1px solid red;margin-left: 225px;margin-top: 200px;background-color: aquamarine;}</style></head><body><div class="fu"><div class="son"></div></div></body></html>
该方法是需要精确的父元素宽高的情况下
界面如下图一：
2.利用盒子宽高和margin
<html><head><style type="text/css">*{padding: 0;margin: 0;list-style: none;}.fu{width: 750px;height: 600px;border: 1px solid gray;background-color: antiquewhite;}.son{width: 300px;height: 200px;border: 1px solid red;margin: 200px auto;background-color: aquamarine;}</style></head><body><div class="fu"><div class="son"></div></div></body></html>
这种方法相比于第一种是只对上边距有明确的控制，而对左右用auto，与第一种几乎相同。
3.绝对定位+translate
<!DOCTYPE html><html><head><style type="text/css">*{padding: 0;margin: 0;list-style: none;}.fu{width: 750px;height: 600px;border: 1px solid gray;background-color: antiquewhite;position: relative;}.son{width: 300px;height: 200px;border: 1px solid red;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: aquamarine;}</style></head><body><div class="fu"><div class="son"></div></div></body></html>
结果同图一
4.flex布局
<!DOCTYPE html><html><head><style type="text/css">*{padding: 0;margin: 0;list-style: none;}.fu{width: 750px;height: 600px;border: 1px solid gray;background-color: antiquewhite;display: flex;justify-content: center;align-items: center;}.son{width: 300px;height: 200px;border: 1px solid red;background-color: aquamarine;}</style></head><body><div class="fu"><div class="son"></div></div></body></html>
结果同图一
这几总方法都可以用，但是有优点也有缺陷，本人一般使用方法2 3多一些。
