制作網頁的很多時候為了頁面美觀都需要圖片能夠做到上下居中、左右居中。網上現實的方式方法也有很多，這里分享我經常使用的一種方法。

實現方法

// HTML代碼
<div class="row">
          <div class="col-xs-3">
                    <img src="/public/empty_200x100.png" class="imgbg" style="background-image:url('/uploads/demo.jpg');">
          </div>
</div>

// CSS 代碼
<style type="text/css">
          .imgbg{
                    width:100%; 
                    background-color: #ebf2f9; 
                    background-position: center; 
                    background-size:contain; 
                    background-repeat: no-repeat;
          }
</style>

實現原理

1、先準備一張透明的png圖片。

2、對這個圖片定義一個 Css樣式，添加這幾個屬性：

background-position: center；背景圖片居中

background-size: contain；顯示完整背景圖片

background-repeat: no-repeat；背景圖不重復

3、然后把要顯示的圖片作為背景圖片。

這樣圖片就不會隨著尺寸不同錯位顯示。展示的時候如果需要顯示正方形圖片，只需要制作一個1x1比例的png圖片，另外可以根據自己的要求制作png圖片。

升級處理

在展示圖片的時候，可能有些小伙伴不喜歡把圖片放到style樣式里面，可能會感覺到看起來怪怪的。

style="background-image: url('/uploads/demo.jpg');

我們想要的可能是這樣的展示方式

<img src="/public/empty_200x100.png" data-src="/uploads/demo.jpg" class="imgbg">

這樣其實也簡單，我們可以借助于 jquery 來實現這個功能。代碼如下：

<script type="text/javascript">
$(document).ready(function() {
          $("[class='imgbg']").each(function(index, el) {
                    $(this).css('background-image', 'url(' + $(this).data('src') + ')');
          });
});
</script>

PHP 實現

PHP 實現生成圖片也分為二種

1、圖片上傳的時候，按后臺設置的尺寸生成。

2、圖片預覽的時候，按URL中設置的參數生成。

github地址

https://github.com/zjutsxj/autoCropImage

lexbox

通常首選方法是使用flexbox居中內容。只需三行代碼即可：display:flex，然后使用 align-items:center 和 justify-content:center 將子元素垂直和水平居中。

如下代碼：

html：

<div class="flexbox-centering">
  <div>Centered content.</div>
</div>

css：

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

Grid

使用grid(網格)與flexbox非常相似，也是一種常見的技術，尤其是布局中已經使用網格的情況下。與前一種flexbox技術的唯一區別是它顯示為柵格。

如下代碼：

html:

<div class="grid-centering">
  <div class="child">Centered content.</div>
</div>

css: