## 一、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; } ```