当前有这样一个需求,用一个容器去装载一个不确定大小的img标签,但又需要这个图片是垂直居中的效果,由于无法预先确定图片大小,因此也就无法使用css中常用的方法去实现其垂直居中的效果,能够想到的就是通过js动态取得图片的大小,再根据这个图片的大小去重新调整设置其样式,从而达到一个垂直居中的效果。
下面附上代码及详细说明:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片垂直水平居中实现方式</title>
<style>
.img-box{
margin: 20px auto;
position: relative;
width: 100px;
height: 100px;