方法：1、给照片元素的父元素添加相对定位样式，给照片元素添加绝对定位样式；2、 利用 top属性和“m arg in -t op”属性设置照片垂直居中，只需要给照片元素添加“top:50% ;m ar gin -top:上 外边距 值;”样式即可。
本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。
css怎么让照片垂直居中
用绝对定位实现垂直居中
1、给 img 的父元素添加相对定位属性（pos IT ion: relative），同时，要给子元素也就是图片img元素添加绝对定位属性（position: absolute）。
2、将图片元素的top属性设置为50%。
3、现在我们需要给img元素设置一个负的margin-top值，这个值为你想要实现垂直居中的元素高度的一 半 ，*如果不确定元素的高度，可以不使 用M argin-top，而是使用transform:translateY(-50%);属性。
记住：如果你想要同时实现水平居中，那么你可以用实现垂直居中的一样的技巧来实现。
示例如下：
<html>
<head>
<style ty PE ="text/css">
.posdiv{
width: 300px;
h ei ght: 250px;
position: relative;
border:1px solid red ;
}
.posdiv img{
width: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="posdiv">
<img src="1118.02.png" alt="">
</div>
</body>
</html>输出结果：
（学习视频分享：css视频教程）
以上就是css怎么让照片垂直居中的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 css怎么让照片垂直居中 全部内容，希望文章能够帮你解决 css怎么让照片垂直居中 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did200379