css中的几种图片居中方式

在平常的书写代码的过程中，我们经常会碰到要将某种东西如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;
}

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