本文系自己原创，因为想总结一下笔记。试过了很多博文提到的什么8种，12种方法，发现有不少都不能使用。
所有，自己动手，丰衣足食。
请直接忽视外部代码即可。因为啥特性也没有，就是为了突出案例的效果。
<!-- * @Descripttion: * @version: * @Author: yang_ft * @Date: 2020-09-23 16:30:19 * @github: famensaodiseng * @LastEditTime: 2020-09-23 17:24:32 * @fileheader.LastModifiedBy: 杨方涛 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <title>垂直居中</title> <style> * { margin: 0; padding: 0; } .box1, .box2, .box3, .box4, .box5, .box6 { width: 800px; height: 300px; border: 1px dashed #000; margin: 0 auto; margin-top: 20px; } .div1, .div2, .div3, .div4, .div5, .div6 { width: 100px; height: 100px; } /* 方法一 适合子盒子有宽高*/ .box1 { position: relative; } .div1 { background: orange; position: relative; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; } /* 方法二 子盒子有无宽高都适用*/ .box2 { position: relative; } .div2 { background: orchid; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 方法三 子盒子有无宽高都适用*/ .box3 { display: flex; justify-content: center; align-items: center; } .div3 { background: yellow; } /* 方法四 子盒子有无宽高都适用*/ .box4 { position: relative; } .div4 { background: rebeccapurple; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } /* 方法五 子盒子有无宽高都适用*/ .box5 { display: grid; justify-items: center; align-items: center; } .div5 { background: slategray; } /* 方法六 子盒子需要有宽高*/ .box6 { position: relative; } .div6 { background: springgreen; position: absolute; margin: 0 auto; top: calc(100px); /* （父元素高-子元素高）÷ 2=100px */ /* let: calc(350px); */ left:calc(350px); /* （父元素宽-子元素宽）÷ 2=350px */ } /* 解释一下calc() 它是CSS3中新增的一个函数，用于动态计算宽/高 */ </style> </head> <body> <div> <div>盒子1</div> </div> <div> <div>盒子2</div> </div> <div> <div>盒子3</div> </div> <div> <div>盒子4</div> </div> <div> <div>盒子5</div> </div> <div> <div>盒子6</div> </div> </body> </html>