微信ID：WEB_wysj(点击关注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄

（页底留言开放，欢迎来吐槽）

● ● ●

在网页上使 HTML 元素居中看似一件很简单的事情. 至少在某些情况下是这样的，但是复杂的布局往往使一些解决方案不能很好的发挥作用。

在网页布局中元素水平居中比元素垂直居中要简单不少，同时实现水平居中和垂直居中往往是最难的。现在是响应式设计的时代，我们很难确切的知道元素的准确高度和宽度，所以一些方案不大适用。据我所知, 在CSS中至少有六种实现居中的方法。我将使用下面的HTML结构从简单到复杂开始讲解:

在制作网页的很多时候为了页面美观都需要图片能够做到上下居中、左右居中。网上现实的方式方法也有很多，这里分享我经常使用的一种方法。

实现方法

// 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>

Flexbox

通常首选方法是使用flexbox居中内容。只需三行代码即可：