关于子元素居中的问题

关于子元素居中的问题

我被子元素居中的问题困几次 火大 今天刚好学到一个新方法 所以做成一个笔记；
我们会经常在电商的网站banner 轮播的部分 会有两个用户切换广告轮播按钮 如

红框里的部分；
实现方法有那些呢：

html

<div class="div1">
    <div class="div2"></div>
    <div class="div3"></div>
</div>

css

.div1{
    width:100%;
    height:200px;
    banckground-color:red;
}
.div2{
    width:50px;
    height:50px;
    background-color:yellow;
    border:1px solid green;
}
.div3{
    width:50px;
    height:50px;
    background-color:yellow;
    border:1px solid #fff;
}

将css的div2和div3 分别左右浮动 然后给margin-top：（父元素的高度-子元素的高）/2 就能够实现左右居中的布局 这确实最简单 而且是有效的办法
但是 如果如果父元素的高度未知 或者父元素的高度可能需要改动 那么有什么办法能够实现左右的居中呢
思路就是利用css3中的动画属性transfrom
html

<div class="div1">
    <div class="div2"></div>
    <div class="div3"></div>
</div>

css

.div1{
    width:100%;
    height:200px;
    banckground-color:red;
    position:relative;/*父元素相对定位*/
}
.div2{
    width:50px;
    height:50px;
    background-color:yellow;
    border:1px solid green;
    position:absolute;/*子元素绝对定位*/
    top:50%;/*绝对定位 距上的值*/
    left:0;/*距左的值*/
    transfrom:translate(0,-50%);/*css3中的动画transfrom属性中的tranrlate偏移（x,y）x,y值的偏移*/
}
.div3{
    width:50px;
    height:50px;
    background-color:yellow;
    border:1px solid #fff;
    position:absolute;/*子元素绝对定位*/
    top:50%;/*绝对定位 距上的值*/
    right:0;/*距右的值*/
    transfrom:translate(0,-50%);
}

这样就实现了就算父元素高度未知的情况下也能实现子元素左右居中 哈哈