場景需求

頁面實現(xiàn)大頭貼功能，相框固定，照片可更換，類似下圖。

image

解題思路

其實我們可以拆分一下：相框.png是一張圖片，金泰熙小姐姐照片.jpg是另一張圖片，只要把相框.png疊在金泰熙小姐姐照片.jpg圖片前面，那么就實現(xiàn)啦！

先上HTML結(jié)構(gòu)：

<div class="box">
  <img class="photo" src="金泰熙小姐姐照片.jpg" alt="我是原始照片_寬高不定" />
  <img class="phframe" src="相框.png" alt="我是花里胡哨的相框_中間鏤空" />
</div>

相框為固定寬高，假設(shè)寬為300px，高為400px。

CSS樣式如下：

.box{width:300px;height:400px;overflow:hidden;position:relative;}
.photo{height:400px;}
.phframe{width:300px;height:400px;position:absolute;left:0;top:0;}

那么問題來了，photo怎么居中？

試過的不成功解法：

1、把photo設(shè)為絕對定位，left:-50%，再設(shè)margin-left為負值。由于photo寬度不確定，因此margin-left具體值不確定。

2、寬度設(shè)為300px，圖片變形。

3、把photo設(shè)為絕對定位，margin:auto,left:0,right:0。當box容器寬度小于photo時，該方法失效。

解決方法

以上方法均無法實現(xiàn)居中后，想到如下可行辦法：

HTML結(jié)構(gòu)：

<div class="box">
  <div class="photobox">
    <img class="photo" src="金泰熙小姐姐照片.jpg" alt="我是原始照片_寬高不定" />
  </div>
  <img class="phframe" src="相框.png" alt="我是花里胡哨的相框_中間鏤空" />
</div>

CSS樣式：

.box{width:300px;height:400px;overflow:hidden;position:relative;}
.photobox{width:1000px;height:400px;position:absolute;left:-350px;top:0;text-align:center;}
.photo{height:400px;}
.phframe{width:300px;height:400px;position:absolute;left:0;top:0;}

給photo外加一個div容器photobox，給photobox設(shè)定一個足夠?qū)挼膶挾?，再將photobox相對box居中，然后再用text-align:center讓photo相對于photobox居中。

photobox容器left值=（photobox容器寬 - box容器寬）/2