欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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;
}

这几种方法利用百分比布局,可以随着盒子大小的改变而改变,所以,在改变大小时不在需要去改变新的布局,就可以达到居中的效果。

相关标签: 居中布局