您的位置:首页 > CSS技巧 > 【 返回上一页

css图片垂直居中 让html img图片垂直居中的三种方法

本教程为thinkcss教大家三种让img元素图片在盒子内垂直居中的方法教程,根据代码与文章教程理解掌握并加以使用。

一、使用flex实现垂直居中

利用css flex实现垂直居中。flex可能不是实现垂直居中最好的选择,因为IE8,9并不支持它。

现在,为了用flex实现垂直居中,我们首先要创建一个包裹着图片的div元素,然后给它定义一些基础属性。

以下图片img宽度为(设置为)100px,高度为100px。

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;}

效果:

浏览器运行效果:实现图片垂直居中布局
浏览器运行效果:实现图片垂直居中布局

解释:
1、为了用flex实现垂直居中,我们首先要创建一个包裹着图片的div元素,然后给它定义一些基础属性。
2、div元素的display属性设置为flex。
3、div添加另外一条属性align-items: center;

二、利用Display: table;实现img图片垂直居中

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、首先我们先要创建一个div元素以及另外一个包含图片的div元素,然后我们开始设置它的样式。
2、给img父元素设置display属性为table
3、把包裹图片的那个div元素的display属性设置为table-cell
4、为了实现垂直居中,我们现在要做的就是给包裹图片的div元素设置vertical-align: middle;属性

注意:如果你也想实现水平居中,你可以给最外层的div元素添加text-align: center属性,注意不是id=”img”的div

三、用绝对定位实现垂直居中(推荐-兼容性好)

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;}

解释:
1、一张包裹在div中的img图片,我们给不光给图片以及div元素定义了尺寸,还给div元素定义了#fff的背景色(背景颜色可以根据需求设置)。
2、给img的父元素添加相对定位属性(position: relative),同时,要给子元素也就是图片img元素添加绝对定位属性(position: absolute)。
3、将图片元素的top属性设置为50%。
4、现在我们需要给img元素设置一个负的margin-top值,这个值为你想要实现垂直居中的元素高度的一半,*如果不确定元素的高度,可以不使用margin-top,而是使用transform:translateY(-50%);属性。
记住:如果你想要同时实现水平居中,那么你可以用实现垂直居中的一样的技巧来实现。

通过以上三种方法让img图片垂直居中,希望大家能掌握布局方法与原理。

在线运行代码:

运行代码试试

免费打包下载地址:

这里介绍图片的垂直居中,同时thinkcss也提供水平居中内容、DIV等居中教程方法,可在网页上搜索查找相关居中教程。

相关标签: 居中 垂直居中
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/jiqiao/1492.shtml

日期:2018-02-06 18:41:37 来源:css学习与资料网 作者:ThinkCSS

热门点击