<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> #super{ width: 200px; height: 200px; background: red; display: flex; align-items: center; justify-content: center; } #sub{ width: 100px; height: 100px; background: blue; } </style> <body> <div id="super"> <div id="sub"></div> </div> </body> </html>
只要在父元素放上display:flex(flex布局)
align-items:center 垂直居中
justify-content:center 垂直居中
欢迎进群:822162679
原文：https://www.cnblogs.com/GeekXwj/p/9304504.html