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; /*左右對齊*/
關閉
Hi,
認真聆聽您的需求
是我們最重要的工作之一...
服務網絡
