js前端图片居中的方法总结

第一种方法（text-align：center）的style代码：
.wayCont1 {
width: 500px;
border: 1px solid #f0f;
text-align: center;
font-size: 0px;
/* //HTML图片之间，浏览器会产生默认的间距，父元素设置font-size：0px;可以很好地解决这个问题。 */
}
.wayCont1 img {
max-width: 200px;
}
下面是具体的展示。

第二种方法（margin：0 auto（父级不能有高度））的style代码：
.wayCont2 {
width: 250px;
border: 1px solid #f0f;
}
.wayImg {
margin: 0 auto;
display: block;
width: 200px;
}

第三种方法（定位+偏移量）style的代码：
.wayCont3 {
position: relative;
border: 1px solid #f0f;
width: 250px;
height: 250px;
}
.wayCont3Img {
width: 200px;
height: 120px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -60px; /* 图片高度的一半 /
margin-left: -100px; / 图片宽度的一半 */
}

第四方法（定位+定位方向全是0+margin:auto）的style代码：
.wayCont4 {
position: relative;
width: 250px;
height: 250px;
border: 1px solid #f0f;
}
.wayCont4Img {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}

第五方法（定位+transform+各浏览器的兼容）的style代码：
.wayCont5 {
position: relative;
width: 250px;
height: 250px;
border: 1px solid #f0f;
}
.wayCont5Img {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

第六方法（定位+css3的新属性calc）的style代码：
.wayCont6 {
position: relative;
width: 250px;
height: 250px;
border: 1px solid #f0f;
}
.wayCont6Img {
width: 200px;
height: 120px;
position: absolute;
left: calc(50% - 100px); /* 减去的是图片宽的一半 /
top: calc(50% - 60px); / 减去的是图片高的一半 */
}

第七方法（display:flex）的style代码：
.wayCont7 {
width: 250px;
height: 250px;
display: flex;
justify-content: center; /水平居中/
align-items: center; /纵轴上面的居中/
border: 1px solid #f0f;
}

第八方法（display:table-cell）的style代码：

.wayCont8 {
display: table-cell;
width: 250px;
height: 250px;
text-align: center; /* 是横向居中 /
vertical-align: middle; / 是纵向居中 /
/ float: none; /
border: 1px solid #f0f;
}
.wayCont8Img {
/ display: inline-block; */
}