第一种：commonmargin.main{position:relative;宽度：800px；高度：500px；背景颜色：浅蓝色；}.content{位置：绝对；宽度：300px；高度：200px；顶部：50%；左：50%；左边距：-150px；边距顶部：-100px；背景：浅粉色；两种类型：position+transform.main{position:relative;宽度：800px；高度：500px；背景颜色：浅蓝色；}.content{位置：绝对；宽度：300px；高度：200px；顶部：50%；50%；转换：翻译（-50%，-50%）；背景：浅粉色；}第三种：top,right,bottom,left通过position.main{位置：相对；宽度：800px；高度：500px；背景颜色：浅蓝色；}.content{位置：绝对；宽度：300px；高度：200px；背景：浅粉色；保证金：自动；}第四种：display:table-cell.main{width:800px;高度：500px；背景：淡蓝色；显示：表格单元格；/*标准配置*/vertical-align:middle;/*标准配置*/}.content{width:300px;高度：200px；背景：浅粉色；保证金：自动；:calc，不能大量使用，会影响性能。主要{宽度：800px;高度：500px；背景颜色：浅蓝色；}。内容{宽度：300px；高度：70px；背景：浅粉色；保证金：自动；位置：相对；顶部：计算（（100%-70px）/2）；}第六种：flex+align-items.main{display:flex;宽度：800px；高度：500px；背景颜色：浅蓝色；证明内容：居中；对齐项目：居中；}.content{宽度：300px；高度：200px；背景：浅粉色；}第七种：flex+align-self.main{display:flex;宽度：800px；高度：500px；背景颜色：浅蓝色；证明内容：居中；文本对齐：居中；}.content{宽度：300px；高度：200px；背景：浅粉色；对齐自我：中心；}第八种：flex+margin.main{display:flex;w宽度：800px；高度：500px；背景颜色：浅蓝色；}.content{宽度：300px；高度：200px；背景：浅粉色；保证金：自动；}第九种：grid+align-content.main{display:grid;宽度：800px；高度：500px；背景颜色：浅蓝色；证明内容：居中；对齐内容：居中；}.content{宽度：300px；高度：200px；背景：浅粉色；}第十种：grid+align-item.main{display:grid;宽度：800px；高度：500px；背景颜色：浅蓝色；证明内容：居中；对齐项目：居中；}.content{宽度：300px；高度：200px；背景：浅粉色；}第十一种：grid+align-self.main{disp铺设：网格；宽度：800px；高度：500px；背景颜色：浅蓝色；证明内容：居中；}.content{宽度：300px；高度：200px；背景：浅粉色；对齐自我：中心；类型：grid+margin.main{宽度：800px；高度：500px；显示：网格；背景：淡蓝色；}.content{宽度：300px；高度：200px；保证金：自动；背景：浅粉色；}第十三：grid+palce-content.main{width:800px;高度：500px；显示：网格；地点内容：中心；/*这是justy-content和align-items的组合*/background-color:lightblue;}。内容{宽度：300px；高度：200px；背景：浅粉色；}第十四：grid+place-items.main{显示：网格；宽度：800px；高度：500px；背景颜色：浅蓝色；放置项目：中心；}.content{宽度：300px；高度：200px；背景：浅粉色；}第十五种：grid+template.main{margin:auto;宽度：800px；高度：500px；背景颜色：浅蓝色；显示：网格；网格模板列：1frauto1fr；网格模板行：1fr自动1fr；网格模板区域：'。..''.阿莫斯。'...';}.content{宽度：300px；高度：200px；背景：浅粉色；网格区域：amos；}好啦，十五种方法Get！