第一種：將元素通過display：inline-block轉化為行內塊元素居中，例如：

.box{width:500px;height:500px;box-shadow:0 0 5px #000;text-align:center;font-size:0;}

.box .zi{width:120px;height:100px;background:#0f0;display:inline-block;vertical-align:middle;}

.box:after{content:"";display:inline-block;height:100%;vertical-align:middle;}

第二種：用定位的方式將之移動到位置，例如:

.box{width:500px;height:500px;box-shadow:0 0 5px #000;position:relative;}

.box .zi{width:120px;height:100px;background:#0f0;

position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;}

第三種：類似第二中只不過通過百分比調整位置，例如

.box{width:500px;height:500px;box-shadow:0 0 5px #000;position:relative;}

.box .zi{width:120px;height:100px;background:#0f0;position:absolute;left:50%;top:50%;margin:-50px 0 0 -60px;}

第四種：類似第三種，但是在調整回到中心位置時使用transform：translate( ，)進行調整，例如

.box{width:500px;height:500px;box-shadow:0 0 5px #000;position:relative;}

.box .zi{width:120px;height:100px;background:#0f0;

position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}

第五種：使用彈性盒(display：flex)，例如

.box{width:500px;height:500px;box-shadow:0 0 5px #000;display:flex;justify-content:center;align-items:center;}

.box .zi{width:120px;height:100px;background:#0f0;}

以上最常用的五種方式，除此之外還有很多方式，根據每個人的習慣不同個人用法不同，

首先我們需要新建一個html頁面。

然后在body部分新建一個img標簽，并指定一張圖片。

在瀏覽器中查看效果，可以發現圖片是默認左對齊的，并沒有在正中央顯示。

將圖片套在一個p或者span標簽中，給標簽添加一個值為text-align:center的style屬性即可。

#warning{ width: 987px; margin: 0 auto; height:80px; line-height:80px; background:#ffd; position:fixed; _position:absolute; top:0; z-index:99999; overflow:hidden;} 要居中的話寬度不能用百分比 只能是具體數值