元素垂直水平居中的几种方法HTML: 123<body> <div></div></body> 方法1:12345678910111213141516body { width: 100%; height: 100vh; border: 1px solid blue;}body div { height: 100px; width: 100px; background-color: red; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;} 方法2:123456789101112body { width: 100%; height: 100vh; border: 1px solid blue; display: flex;}body div { height: 100px; width: 100px; background-color: red; margin: auto;} 方法3:12345678910111213body { width: 100%; height: 100vh; border: 1px solid blue; display: flex; justify-content: center; align-items: center;}body div { height: 100px; width: 100px; background-color: red;} 方法4:1234567891011121314body { width: 100%; height: 100vh; border: 1px solid blue;}body div { height: 100px; width: 100px; background-color: red; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}