1.弹性盒子
给父元素设置
display:flex;
justify-content:center;
align-items:center;
.father {
width: 200px;
height: 200px;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
}
.son {
width: 50px;
height: 50px;
background-color: yellow;
}
2.line-height
只对文本有效果,对定宽高的盒子没用。所以在文本水平垂直居中对的时候使用。
且只对单行文本有效,多行文本不可
line-height: 200px; //垂直
text-align: center; //水平
3.通过绝对定位的方式 absolute+负margin
需要知道子元素的宽高
.father {
width: 200px;
height: 200px;
background-color: pink