使用CSS3伸缩盒实现图片垂直居中

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用CSS3伸缩盒实现图片垂直居中相关的知识,希望对你有一定的参考价值。

用CSS实现图片垂直居中的方法有很多,针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中。

代码如下:

<div class="box">
    <img src="1.png" alt="">
</div>
1 .box{
4     display: flex;    /*容器为伸缩盒*/
5     align-items: center;  /*纵轴方向上的对齐方式设置为居中*/
6 }
7 img{
8     width: 100%;
9 }

以上是新版伸缩盒实现的,支持安卓4.4+,如果需要兼容安卓4.4-,需要再另外添加旧伸缩盒,如下:

.box{
    display: -webkit-box;    /*容器为旧伸缩盒*/
    -webkit-box-align: center; /*设置旧伸缩盒对齐方式*/
  
    display: flex;            /*容器为伸缩盒*/
    align-items: center;  /*纵轴方向上的对齐方式设置为居中*/
}
img{
    width: 100%;
}

 

以上是关于使用CSS3伸缩盒实现图片垂直居中的主要内容,如果未能解决你的问题,请参考以下文章

CSS3 弹性盒布局

CSS3弹性伸缩布局——box布局

有几张高度不一样的小图片,如何用html+css实现在同一行垂直居中对齐?

CSS3弹性盒模型的布局理解

css3不固定宽高水平垂直居中

span内图片元素如何垂直居中