## 一、position 子元素已知寬度 - 父元素設置為：position: relative; - 子元素設置為：position: absolute; **要點：子元素距上50%，距左50%，外邊距設置為自身寬高的一半** ``` <div class="parent"> <div class="child"></div> </div> .parent { background: #f00; width: 400px; height: 400px; position: relative; } .child { background: #00f; width: 200px; height: 100px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -100px; } ``` ## 二、position+transform 子元素已知寬度 - 父元素設置為：position: relative; - 子元素設置為：position: absolute; **要點：子元素添加 transform: translate(-50%,-50%);** ``` <div class="parent"> <div class="child"></div> </div> .parent { background: #f00; width: 400px; height: 400px; position: relative; } .child { background: #00f; width: 200px; height: 100px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } ``` ## 三、flex布局 - 父元素可不設置寬高 - 子元素必須設置寬高 **要點：父元素添加 display: flex; justify-content: center; align-items: center;** ``` <div class="parent"> <div class="child"></div> </div> .parent { background: #f00; width: 400px; height: 400px; display: flex; justify-content: center; align-items: center; } .child { background: #00f; width: 200px; height: 100px; } ``` ## 四、table-cell布局 - 外層元素設置為 display: table; - 中間元素設置為 display: table-cell; - 內層元素設置為 display: inline-block; **要點：** - **三層元素嵌套** - **中間元素的table-cell相當于表格的td，td為行內元素，所以需要再嵌套一層** - **內嵌元素必須設置 display: inline-block;** - **中間元素table-cell的背景色會覆蓋父元素的背景色** ``` <div class="box"> <div class="content"> <div class="inner"></div> </div> </div> .box { background: #f00; width: 400px; height: 400px; display: table; } .content { background: #00f; display: table-cell; vertical-align: middle; text-align: center; } .inner { background: #000; display: inline-block; width: 200px; height: 100px; } ```