CSS 中如何实现图片垂直居中显示? 下面本篇文章就来给大家介绍一下使用 CSS 实现图片垂直居中的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
一, 使用 flex 实现图片垂直居中
利用 display:flex; align-items:center; 实现垂直居中. flex 可能不是实现垂直居中最好的选择, 因为 IE8,9 并不支持它.
html 代码:
- <div class="flexbox">
- <img src="1.jpg" alt="">
- </div>
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;
- }
二, 利用 display:table; 实现 img 图片垂直居中
给最外层的 div 设置 display 属性为 table;img 的父元素 div 设置 display:table-cell,vertical-align: middle; 如果你也想实现水平居中, 你可以给最外层的 div 元素添加 text-align: center 属性
HTML 代码:
- <div class="tablebox">
- <div id="imgbox">
- <img src="1.jpg" alt="">
- </div>
- </div>
CSS 代码:
- .tablebox{
- width: 300px;height: 250px;background: #fff;display: table
- }
- #imgbox{
- display: table-cell;vertical-align: middle;
- }
- #imgbox img{
- width: 100px
- }
三, 用绝对定位实现垂直居中 (推荐 - 兼容性好)
1, 给 img 的父元素添加相对定位属性 (position: relative), 同时, 要给子元素也就是图片 img 元素添加绝对定位属性 (position: absolute).
2, 将图片元素的 top 属性设置为 50%.
3, 现在我们需要给 img 元素设置一个负的 margin-top 值, 这个值为你想要实现垂直居中的元素高度的一半,* 如果不确定元素的高度, 可以不使用 margin-top, 而是使用 transform:translateY(-50%); 属性.
记住: 如果你想要同时实现水平居中, 那么你可以用实现垂直居中的一样的技巧来实现.
HTML 代码:
- <div class="posdiv">
- <img src="1.jpg" alt="">
- </div>
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 相关知识, 可访问 CSS 教程 !!
来源: http://www.css88.com/qa/css3/14600.html