<div class="father">
<div class="child">
</div>
</div>
child分很多种情况
- 行内元素:text-align + line-height
.father{
width:300px;
height:300px;
text-align:center;
line-height:300px;
}
定宽定高:absolute + margin
.father{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
}
/* 或者 */
.child{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
不定高:absolute + translate
-
.father{ position: relative; } .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
- 不定高:flex
-
.father{ display: flex; } .child{ margin:auto; } /* 或者 */ .child{ justify-content: center; align-items: center; }
- table方式:
-
.father{ display: table; } .child{ display: table-cell; text-align: center; vertical-align: middle; }