html - 怎样让图片100%居中在屏幕中间呢

问题描述

问 题

怎样让图片100%居中在屏幕中间呢

解决方案

这个有好几种方法啊。
一、用margin负值，这种方法适合宽高固定。
position:absolute;
left:50%;
top:50%;
margin-left:-宽度的一半;
margin-top:-高度的一半；

二、使用css3新属性translate，这个不需要固定宽高。
position:absolute;
left:50%;
top:50%;
transform:translate(-50% -50%);

三、使用flex布局，这个也不需要固定宽高。
在父容器上面设置
display:flex;
justify-content:center;
align-items:center;
这样也可以实现居中。

四：将上下左右全设为0.
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
这样全部设为0后会拉伸图片充满父容器，然后margin设为auto会自动填充上外边距，就能实现居中。

这篇关于html - 怎样让图片100%居中在屏幕中间呢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！