如何使用css让img垂直居中（flex方法）？

发布网友 发布时间：2022-04-21 19:06

我来回答

共2个回答

热心网友 时间：2023-07-26 01:42

在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}
.flexboximg{width:100px;height:100px;align-items:center;}
如果情况容许的话，可以用以下方法，兼容性更好：
body{background:#ccc;}
.posdiv{width:300px;height:250px;background:#fff;position:relative;margin:0auto}
　　.posdivimg{width:100px;position:absolute;top:50%;margin-top:-50px;}

热心网友 时间：2023-07-26 01:42

首先给图片添加一个div，设置其宽高及基本属性，其次把div中的display元素设置成flex，最后给img
添加align-items:center属性，代码如下：
body{
background:#000
}

.xxx{
width: 300px;
height: 250px;
background:#deeppink;
display: flex;
align-items: center
}

.xxx img{
width: 100px;
height: 100px;
align-items: center;
}

可以多看看黑马程序员的课程，多学学这些基础知识。