盒子上下左右居中方法全（持续更新中）

总是忘记这几个方法，今天来记录一下

一、已知大小盒子；左右居中

1、使用定位，左右拉取方法：

html:
   <div class="box">
    <div class="child"></div>
  </div>

css:
 .box{width: 300px;height: 300px;border: 1px solid orange;position: relative;}
 .child{width: 100px;height: 100px;border: 1px solid blue;position:absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;}

2、使用margin：auto，方法:

 html:
   <div class="box">
       <div class="child"></div>
    </div>

 css:
.box{width: 300px;height: 300px;border: 1px solid red;position: relative;}
.child{width: 100px;height: 100px;border: 1px solid green;position:absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}

二、未知大小盒子左右居中，

1、使用位移方法，兼容性较低，移动端慎用

html：
<div class="box">
    <div class="child">我是子盒子</div>
</div>

css：
.box{width: 300px;height: 300px;border: 1px solid red;position: relative;}
.child{width:auto;border: 1px solid green;position:absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);-webkit-transform: translate(-50%, -50%);　-moz-transform: translate(-50%, -50%);　-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);}

2、组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（内部div设置display:inline-block即可）。

html：
<div class="cell">
    <p>我爱你</p>
</div>
<div class="cell">
    <p>我爱你</p><p>亲爱的中国</p>
</div>
<div class="cell">
    <p>我爱你</p><p>亲爱的中国</p>
    <div style="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div>
</div>

 css：
/*** table-cell middle center组合使用 ***/
    .cell {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        width: 240px;
        height: 180px;
        border:1px solid #666;
    }

3、用弹性布局实现垂直左右居中

html：
 <div class="wrap">
    <div class="in"></div>
  </div>

css：
 *{
  margin: 0;
  padding: 0;
  }
  .wrap{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    margin: 3.125em auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .in{
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
  }

display:flex; 设置.wrap为弹性布局

justify-content:center;定义项目在主轴(水平方向)上居中对齐

align-items:center;定义项目在交叉轴(垂直方向)上居中对齐

img元素再div中居中对齐：

第一种方法：

第一步:在img标签后面添加一个span元素

<body>
<div id="div1">
    <img src="../image/06img1.png"/><span></span>
</div>
</body>

第二步:为这几个元素设置样式

1.把#div1元素设置text-align:center
2.把添加的元素span转化为行内块元素(display:inline-block)，并且设置vertical-align:middle
3.为img元素设置vertical-align:middle。

完成以上操作之后，这个Img元素在#div1中就是垂直居中的了，这种方法的兼容性等比较好，唯一的缺点可能就是要在元素后面添加一个元素
(注意：这个元素最好是span元素，如果是div元素的话，在低版本ie下有兼容问题)

第二种方法：

这种方法利用了css3的新特性
为#div1设置display:flex;vertical-align:middle;align-items:middle。
这种方法的缺点就是只要不支持css3的浏览器，那就不会起作用了。