图片的居中方法

1.水平居中、垂直的方法：

（1）图片的水平居中：a.在其父级设置text-align:center;b.在图片上设置margin: 0 auto;display: block;

图片的水平垂直居中：a.使用display：table和table-cell;

html:

<div class="center-aligned">

　　<div class="center-core">

　　　　<img src="page_1_5.png" alt="">

　　</div>

</div>

css:

.center-aligned {

display: table;

background: hsl(120, 100%, 97%);

width: 500px;

height:500px;

}

.center-core {

display: table-cell;

text-align: center;

vertical-align: middle;

}

B.绝对定位position:absolute,left:50%,top:50%,平移transform:translate(-50%, -50%);

C.在父级使用：display: flex;justify-content: center;align-items: center;，但是会有兼容性问题，chrome，火狐支持，IE10部分支持2012，需要-ms-前缀

转载于:https://www.cnblogs.com/juanzirosalind/p/5001123.html