css实现水平垂直居中（总结）

问题：

有父元素div[#parent]，有子元素div[#child]，用css实现子元素在父元素中”水平垂直居中”

<div id="parent">
    <div id="child"></div>
</div>

效果描述：

方案实现：

方案1

#parent{ width: 220px; height: 220px; background-color: #B94D55; position: relative; }
#child{ width: 100px; height: 100px; background-color: #B99D4D; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }

方案2

#parent{ width: 220px; height: 220px; background-color: #B94D55; position: relative; }
#child{ width: 100px; height: 100px; background-color: #B99D4D; position: absolute; top: 50%; left: 50%; /*css3*/ transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }

当然，用fixed定位也是可以实现的，细心的同学可以发现，方案1和方案2的区别仅仅是移动的方式不同（margin和translate），那么方案1和方案2有什么区别吗？

区别：

• 方案1的margin无兼容性，方案2的css3有兼容性
• 方案2的的优点：当子元素div[#child]不知形状（宽高）时，方案2就可以实现

方案3

#parent{ width: 220px; height: 220px; background-color: #B94D55; /*flex*/ display: -webkit-flex; display: flex; justify-content: center; align-items: center; }
#child{ width: 100px; height: 100px; background-color: #B99D4D; }

这个的实现原理是flex布局，这里有个很不错的教程 前往