关于背景图片的引入以及垂直居中有一些问题
我在做背景图片填充并赋予小诗一首垂直居中的编码练习，现在有一些问题希望老师可以解答。
相关代码：
问题描述：
1、视频中的PPT是以div的盒子来引入背景图，而我现在以是body来引入，即整个页面。那如果以body来引入背景图，是否还需要设置宽高（我这么问是因为我现在设置的宽高压根没起作用，都是上来直接自动平铺）；
2、我为包含了小诗的盒子作了绝对定位并设置垂直居中，但是实际效果不尽不如人意；
我现在不清楚是因为我在div样式这块的代码写的有问题呢，还是在对body的背景图样式设置上就已经有了问题，还请老师解答。
正在回答
同学你好，解答如下：
1、之所以给body设置定位，是为了让小盒子以body为基准进行定位，这样小盒子的垂直居中才是相对于body的，否则小盒子会相对于浏览器窗口进行定位。二者效果不一样。
相对于body垂直居中，就类似于你在自己的卧室中垂直居中；相对于浏览器窗口垂直居中，就类似于你在整个房子中垂直居中。不论是否给body设置定位，你的状态都能够实现垂直居中，只是相对于的参照物不一样。
2、同学使用的是left:50%;，margin-left:负自身宽度一半；这两个样式来实现水平居中的，所以必须给小盒子设置宽度，这是固定用法。垂直居中也是一样的道理，需要给小盒子设置高度。老师之前回复中说了一句“垂直方向同理”，就是说也要给小盒子设置高度。因为margin-top：负自身高度一半；这个样式，需要元素有固定的高度：
祝学习愉快！
同学你好，由于body的背景图设置的不完善、div的定位也不准确，所以效果不对。具体如下：
1、给body设置宽高是有效果的，如下：
而背景并没有平铺（平铺是背景显示多张，当前只显示了一张）。之所以效果不对，是因为此时背景图会按照自身大小来显示，由于自身比body的宽高大，所以背景超出了400*400的范围。
可以给背景图设置一下尺寸看看：
该属性后面会学，同学了解即可。
建议将body的宽高设置成与图片一样大，这样效果会好些：
2、小盒子设置absolute定位后，由于没有给body设置relative定位，所以小盒子会相对于浏览器窗口进行定位，所以小盒子的位置不尽如人意。
建议给body设置relative定位，即让小盒子相对于body进行定位：
另外，如果想让小盒子水平居中，需要给小盒子设置固定宽度，并使用left：50%；、margin-left：负自身宽度的一半；来实现；垂直方向同理。如下：
效果如下：
3、此题不建议给body设置背景图。建议给小盒子包裹一个div，然后给div设置背景图会更简单些。主要原因在于给div设置背景图，背景图超出div的部分会不显示（这个差别同学注意一下即可）。
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星