第一种情况:不确定宽高
- 在父级元素用padding确定上下居中
- 在子级元素用margin确定左右居中
.dad {
border: 1px solid;
padding: 100px 0;
}
.son {
border: 5px solid red;
width: 100px;
margin: 0 auto;
}
第二种情况:div的高度确定(全屏情况)
方法一:子级元素高度要确定的情况
- 用
position:absolute
配合margin: auto
来实现。
body {
margin: 0;
}
.dad {
border: 1px solid;
height: 100vh;
box-sizing: border-box;
}
.son {
border: 5px solid red;
width: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
height: 100px;
}
方法二:子级元素宽度和高度都可以不确定的情况
- 在父级元素添加下面代码
display: flex;
justify-content: center;
align-items: center;
代码展示:http://js.jirengu.com/xabiwesali/1/edit
tips:如何实现一比一的自适应div?
- 用
padding-top: 100%;