欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

div层中图片垂直居中的css样式_html/css_WEB-ITnose

程序员文章站 2022-04-20 19:58:05
...
1、图片定义大小
.div{ border:1px solid #000;width:200px;
height:200px;position:relative;
}
.img {
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
width:100px;
height:100px;
border:1px solid red;
}

div层中图片垂直居中的css样式_html/css_WEB-ITnose






2、图片不定义大小




利用定位来显示垂直局中的图片






固定高宽的容器中,图片垂直局中。



div层中图片垂直居中的css样式_html/css_WEB-ITnose




div层中图片垂直居中的css样式_html/css_WEB-ITnose




div层中图片垂直居中的css样式_html/css_WEB-ITnose