你的格式太差了

你就把下载的图片和你的这个HTML文件在同一文件夹下，<img src="图片名" />就行了

主要还是语义，一个是容器一个是段落。其次两个的默认样式好像是不一样的

你的 html 里边的 <img src="test.jpg"> 这里。

视频中的老师的文件夹里有这个图片，而你的没有，除非你自己找一个图片，在同级文件夹中放置，且名称设置为test.jpg

知道了，老师把div浮起来了，然后都设置了top: 0;left: 0所以后面的side-back挡住了前面的side-front，自问自答了，哈哈。

可能是所用浏览器的相关设置不同

你前后怎么放的，一般是后面覆盖前面，假如你写在side-back写在前面就不会覆盖side-front

display:none;去掉了吗？

老师用的是sublime text

设置line-height大小与文本容器等高，可以使单行文本垂直居中。再加上text-align:center;可以使文本垂直水平居中。

http://www.jthinking.com/article/gallery.html#

我也不能居中，这是为什么呢？

.photo .side-back{display: none;}这么写是不对的  改成.photo， .side-back{display: none;}

你应该没有定它的位置吧，position:absolute; left:..;top:..;  不过要看具体情况，你得分享一下你的代码

问问题记得附代码啊，骚年

为了让warp 垂直居中，因为他先用定位设置了一个top:50%;  这样的话这个图片就会下降到50%的调度，也就是warp 的上边沿正好在他原来的中线上，这时就偏下了，因为warp的高度是600，这600应该在上下部分各占一半，也就是300px，但是因为top:50%, 所以这600全到了下边，想居中就得往上移动300，这样才能保证上下部分各300，所以就有了 margin-top:-300px

你的图片宽高 要在你设置的容器宽高范围内

这样应该是可以实现，不过要显示photo_back时，调用js的方法和老师的都不一样了，js要复杂些

找到了photo photo_center

你用的什么浏览器？可以换个浏览器试试看

可以试试这一个 SourceCodePro字体