html如何让img垂直居中,css如何让img垂直居中

css如何让img居中显示?img垂直居中方法?对于刚刚css入门的新手可能还不是很熟悉,下面我们来总结一下css如何让img垂直居中?

92fba0f3d33123d7b32df168863ec43c.png

img垂直居中方法有很多,其中就包括以下三种方法

1.使用flex让img垂直居中

在css中,我们可以使用flex去实现垂直居中,但是flex并不是一个很好的方法,现在很多浏览器并不支持flex,例如IE8,9。

首先我们要先给托图片添加一个div,并且定义为宽度为100px,高度也是100px,并且给它定义一些基本的属性,其中我们把div中的display元素设置成flex,然后把另外一条添加align-items: center属性。

css代码:body{ background:#999}

.flexbox{width: 300px;height: 250px;background:#fff;display: flex;align-items: center}

.flexbox img{width: 100px;height: 100px;align-items: center;}

2.使用display去实现img垂直居中

首先我们要是先创建一个div,以及对有图片的div设置样式,我们可以给img的父级添加一个diaplay,并且属性为table,并且把包含图片的div中的display属性设置成table-cell,其实实现居中我们要做的就是给有图片的div设置成vertical-align: middle;属性就可以了。

css代码:.tablebox{width: 300px;height: 250px;background: #fff;display: table}

#imgbox{display: table-cell;vertical-align: middle;}

#imgbox img{width: 100px}

3.利用图片的绝对定位去实现

我们把有图片的div设置有背景的,并且给img的父元素添加相对属性,并且给子元素添加绝对和相对属性,还要把top的值设置成50%,现在要做的就是给img元素设置成一个负margin-top值。

css代码:body{background: #ccc;}

.posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}

.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}

以上三种方法我们推荐使用第三种,第三种的兼容性比较好,方法比较简单,重点是掌握方法和原理。

以上就是对css如何让img垂直居中的全部介绍,如果你想了解更多有关CSS3教程,请关注php中文网。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值