垂直居中布局
垂直居中我感觉可以分为两个部分:
1.内容垂直居中
文本内容的垂直居中通过line-height实现,具体取值为height-paddingTop+paddingBottom;
2.盒子垂直居中
- position+transform实现。(引出问题:为什么不用marginTop??涉及到重排和重绘)
/* <div class="father"> <div class="child"> 我要垂直居中 </div> <div class="child"> 我要垂直居中 </div> </div> */ .father1 { width: 500px; height: 400px; line-height: 400px; /* 内容水平居中 */ text-align: center; /* 盒子垂直居中 */ position: absolute; top: 50%; transform:translate(-50%,-50%) ; /* 盒子水平居中 */ left:50%; background-color: pink; }
- flex实现。
.father { display: flex; height: 300px; justify-content: space-between; align-items: center; flex-flow: row wrap; background-color: skyblue; } .child:nth-child(1) { background-color: pink; } .child:nth-child(2) { background-color: rgb(160, 12, 37); }