效果没有显示正确，代码哪里不正确吗
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代码，可通过选择【代码语言】突出显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="texxt/css">
img{
width:600px;
margin:0 auto;
}
.left{
width:100px;
height:200px;
float:left;
position:fixed;
left:0px;
top:50%;
margin-top:-100px;
}.right{
width:100px;
height:200px;
float:right;
position:fixed;
right:0px;
top:50%;
margin-top:-100px;
}
</style>
</head>
<body>
<div>
<img src="http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png">
</div>
<div class="left"><img src="http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png"></div>
<div class="right"><img src="http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png"></div>
</body>
</html>
正在回答
同学你好，垂直居中是设置在左右两侧图片的父元素上的，即.left和.right是垂直居中的，并且使用的方式是margin-top:-自身高度的一半：
但是由于图片高度会按照自身宽度自适应，所以图片高度小于父元素的高度：
由于图片与父元素高度不一样，所以父元素垂直居中后，实际上图片并没有垂直居中（图片在父元素中居顶显示，我们看到的是图片，而不是父元素）。
所以给图片设置了高度是100%，含义就是让图片高度与父元素一致，即让图片高200px：
这样就可以让图片也垂直居中了。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星