定位方法(1)：必须设定宽高
.wrap{
width: 300px;
height: 300px;
background: yellow;/*加颜色是为了看界面效果*/
position: relative;
}
.inner{
width: 40px;
height: 40px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
background: orange;/*加颜色是为了看界面效果*/
}
定位方法(2)
.wrap{
width: 300px;
height: 300px;
position: relative;
background: yellow;/*加颜色是为了看界面效果*/
}
.inner{
width: 40px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
margin-left:-20px;
margin-top: -20px;
background: orange;/*加颜色是为了看界面效果*/
}
3. 改变父元素和子元素的display(不推荐使用)
.wrap{
width: 300px;
height: 300px;
display: table-cell;
text-align: center;
vertical-align: middle;
background: yellow;/*加颜色是为了看界面效果*/
}
.inner{
width: 40px;
height: 40px;
display: inline-block;
background: orange;/*加颜色是为了看界面效果*/
}
4.css3的弹性盒方法
.wrap{
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background: yellow;
}
.inner{
width: 40px;
height: 40px;
background: orange;
}
