<div class="wrap">
<div class="child">居中</div>
</div>
如果不知道子盒子的宽高使用以下方法
1.flex布局
.wrap {
height: 330px;
width: 330px;
background-color: red;
display: flex;
justify-content: center; /*justify-content属性定义了项目在行轴上的对齐方式*/
align-items: center; /*align-items属性定义项目在竖轴上如何对齐*/
}
2.transform属性
.wrap {
height: 330px;
width: 330px;
background-color: red;
position: relative;
}
.child {
position: absolute;
top: 50%; /*相对父盒子高度*/
left: 50%; /*%相对于父盒子的宽度*/
transform: translate(-50%,-50%); /*%是相对于自身的宽度和高度*/
width: 50%;
}
3.display的table-cell（ 兼容性最好）
.wrap{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 300px;
height: 500px;
background-color: #00aef4;
}
.child{
display: inline-block;
width: 200px;
background-color: #9b9b9b;
}
如果知道子盒子的宽高：
1.position和margin (ie6 不支持)
.wrap{
width: 300px;
height: 500px;
background-color: #00aef4;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: #9b9b9b;
position: absolute;
top:0;
left: 0;
right:0;
bottom:0;
margin: auto;
}
2.
.wrap{
width: 300px;
height: 500px;
background-color: #00aef4;
position: relative;
}
.child{
background-color: #9b9b9b;
width: 100px;
height: 100px;
position: absolute;;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
3.如果是单行文本, line-height 设置成和 height 值
还有一些比较常见简单方法就不一一赘述了
