css如何让img垂直居中?

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

一、使用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如何让img垂直居中?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏