>[danger] 父级未知宽高, 子级未知宽高 ---  1. 定位方式: ~~~ .father{ position: relative; padding: 100px 0; border: 1px solid black; } .children{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid red; } ~~~ 2. 弹性布局 ~~~ .father { padding: 100px 0; display: flex; align-items: center; justify-content: center; } ~~~ 3. 弹性布局+margin (设计到FFC机制) ~~~ .father{ padding: 100px 0; border: 1px solid black; display: flex; } .children{ border: 1px solid red; margin: auto; } ~~~ --- >[danger] 父级已知宽高, 子级已知宽高 1. 定位: 利用margin为负即可 ~~~ .father{ width: 500px; height: 300px; border: 1px solid black; position: relative; } .children{ width: 150px; height: 100px; border: 1px solid red; position: absolute; top: 50%; left: 50%; margin-left: -75px; margin-top: -50px; } ~~~ 2. 定位+margin分配 ~~~ .father{ width: 500px; height: 300px; border: 1px solid black; position: relative; } .children{ width: 150px; height: 100px; border: 1px solid red; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } ~~~ 3. 网格布局 ~~~ .father{ width: 300px; height: 300px; display: grid; /*每一行/每一列所占宽度*/ grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; /*网格区域 grid areas 在CSS中的特定命名。*/ grid-template-areas: ". . ." ". c ." ". . ."; } .children{ grid-area: c; } ~~~