盒子在页面居中

实现盒子在页面居中

image.png

实现的代码：
1.position可以设置为absolute或fixed。
讲一下第一种top和left都设置为50%，代表这个盒子会往右和下方移动页面的50%，但是这个百分之五十并没有考虑到盒子的大小，所以移动之后需要往回，也就是，往上和左移动盒子的一半。

image.png

2.position可以设置为absolute或fixed
这个和上面那种方法的意思差不多，但是margin：auto。则会考虑到盒子的宽度和高度。所以一般设置盒子水平居中的时候都会用margin：0 auto。

image.png

这些只是目前我所知道的比较靠谱的方法