css如何让img垂直居中
时间：2022-10-20作者：未知来源：争怎路由网人气：
- 网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。css如何让img居中显示？img垂直居中方法？对于刚刚css入门的新手可能还不是很熟悉，下面我们来总结一下css如何让img垂直居中？
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中文网。
以上就是css如何让img垂直居中的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：css如何让img垂直居中