AI智能
改变未来

css垂直居中图片

使用flex完成垂直居中
操纵css flex实现垂直居中。flex或许不是完成垂直居中最好的选择,由于IE8,9其实不赞成它。
那时,为了用flex实现垂直居中,我们起首要竖立一个包裹着图片的div元素,日后给它定义一些根基属性。
HTML代码部份:

<div class=\"flexbox\"><img src=\"1.jpg\" alt=\"\"></div>

CSS代码一部分:

body{ background:#999}.flexbox{width: 300px;height: 250px;bac千克round:#fff;display: flex;align-items: center}.flexbox img{width: 100px;height: 100px;align-items: center;}

如图所示:

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » css垂直居中图片