css中的几种图片居中方式
程序员文章站
2022-03-02 15:29:43
...
在平常的书写代码的过程中,我们经常会碰到要将某种东西如div,img居中放置的情况,作为一名初学者,我们开始用的最多的是在debug中利用margin,padding来调试直至居中,但这种方法会有很大的局限性,如果,父元素的width和height发生改变时,子元素的位置会发生难以预测的变化,导致布局崩坏,但利用百分比等布局方法可有效的减少这种情况的发生。
一:利用display:table-cell
table-cell是css3新增的属性,使用此属性,元素会作为一个表格单元格显示(类似 <td> 和 <th>),目前IE8+以及其他现代浏览器都是支持此属性的。
body
<div class="flag" >
<img style="width:100px;height:100px;" src="CSS实现手风琴效果/images/2.png" alt="">
</div>
css
.flag{
width:500px;
height:500px;
background:#0dccc3;
display:table-cell;
vertical-align:middle;
text-align:center;
}
二:使用display:flex弹性布局的justify-content和align-items居中
body
<div class="flag" >
<img style="width:100px;height:100px;" src="CSS实现手风琴效果/images/2.png" alt="">
</div>
css
.flag{
width:500px;
height:500px;
display:flex;
background: #40d7ff;
justify-content: center;
align-items:center;
}
三:使用position居中布局
body
<div class="flag" >
<img style="width:100px;height:100px;" src="CSS实现手风琴效果/images/2.png" alt="">
</div>
css
.flag{
width:500px;
height:500px;
background:#0dccc3;
position:relative;
}
.flag img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%); //top,left会超出中心点,而translate的-50%会在宽,高上各减少img的50%,从而达到居中的目的;
}
或者
.flag img{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
width:100px;
height:100px;
margin:auto;
}
这几种方法利用百分比布局,可以随着盒子大小的改变而改变,所以,在改变大小时不在需要去改变新的布局,就可以达到居中的效果。