第一種方法（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; */
}