1. 使用定位来判断内容居中给你的父元素定义 position: relative,然后给子元素一个position：absolute，这样靠我们的margin-left和margin-top的负值去计算单位。然后定位。具体例子如下：

.parent_box{

    position: relative;

        height: 150px;

        background: #e8e7d9;

}

.child_box{

        position: absolute;

                                width: 150px;

                                height: 150px;

                                border-radius: 5px;

                                background: #F3511D;

                                top: 50%;

                                margin-top: -75px;

                                left: 50%;

                                margin-left: -73px;

}

2. 使用css3

对应的x,y,z,如果需求只需要一个值是居中的,在这里的值是-50%    毕竟是css3的东西，兼容还是要做的，还有就是css3的东西兼容性，不推荐使用

    transform: translate3d(-50%,-50%,0);

    -webkit-transform: translate3d(-50%,-50%,0);

   -moz-transform: translate3d(-50%,-50%,0);

   -ms-transform: translate3d(-50%,-50%,0);

   -o-transform: translate3d(-50%,-50%,0);

3. 对于父元素高度不确定，又要实现上下左右对齐，只需要在父元素上使用布局，控制内容上下左右居中。这既是box布局

   display:-webkit-box;

                -webkit-box-align:center; /*上下对齐*/

                -webkit-box-pack:center;  /*左右对齐*/