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,
认真聆听您的需求
是我们最重要的工作之一...
服务网络
