>[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; } ~~~