网站推广.NET

网站推广.NET

css怎么让照片垂直居中

来源:互联网

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css怎么让照片垂直居中

用绝对定位实现垂直居中

1、给img的父元素添加相对定位属性(position: relative),同时,要给子元素也就是图片img元素添加绝对定位属性(position: absolute)。

立即学习“前端免费学习笔记(深入)”;

2、将图片元素的top属性设置为50%。

3、现在我们需要给img元素设置一个负的margin-top值,这个值为你想要实现垂直居中的元素高度的一半,*如果不确定元素的高度,可以不使用margin-top,而是使用transform:translateY(-50%);属性。

记住:如果你想要同时实现水平居中,那么你可以用实现垂直居中的一样的技巧来实现。

示例如下:

<html><head><style type="text/css">.posp{    width: 300px;    height: 250px;    position: relative;     border:1px solid red;    }.posp img{    width: 100px;    position: absolute;    top: 50%;    margin-top: -50px;    }</style></head><body><p class="posp">    @@##@@</p></body></html>

输出结果:

(学习视频分享:css视频教程)

css图片垂直居中