1.如何将图片放在div的底部?
在包装的div标签上添加相对位置,然后将图像绝对定位在其中,如下所示:
CSS:
代码:
.div-wrapper {
position: relative;
height: 300px;
width: 300px;
}
.div-wrapper img {
position: absolute;
left: 0;
bottom: 0;
}
HTML:
<div class="div-wrapper">
<img src="blah.png"/>
</div>
2.css实现图片居中于屏幕
css实现图片居中于屏幕,源码如下:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
position: fixed;
top: 50%;
left: 50%;
background-color: #000;
width:100px;
height:100px;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.div{
width:100%;
position:absolute;
top:0;
bottom:0;
background:#f00
}
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="div">
<img src="/images/online_demo/smiley.gif" class="center">
</div>
</body>
</html>
更多参考:完美解决HTML中footer保持在页面底部问题
文章地址:https://blog.csdn.net/m0_38099607/article/details/71598423