多个div怎么居中？

多个div怎么居中？可愁死人了

1、absolute+transform

(1) 情境：两个div时
(2)解决
父元素保证position：relative
子元素保证{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
（3）代码

.parent{
   position:relative;
}
.child{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
}

（4）优缺
优点：绝对定位脱离文档流，不会对后续元素的布局造成影响
缺点：transform 是 CSS3 属性，存在兼容性问题

**2、inline-block + text-align **
（1）情境：多个div嵌套时
（2） 优点：兼容性好
（3）代码

.parent{
     
        text-align: center;
    }
 .child{
        display: inline-block;
    }
<div class="parent">
   <div class="child"> <input type="text"></div>
   <div class="child"><input type="text"></div>
</div>

**3、table+margin
（1） 优点：不用设置父元素样式 ，只支持IE8及其以上版本

 .child{
        display:table;
        margin:0 auto;
    }
<div class="parent">
   <div class="child">居中</div>
</div>