<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直居中</title> <style> /* 方法5 */ .outer{ position: relative; height: 300px; width: 300px; display: flex; border: 1px solid #6A5ACD; } .inner{ height: 200px; width: 200px; margin: auto; background: salmon; } /* 方法4 */ /* .outer{ position: relative; height: 300px; 300px; border: 1px solid #6A5ACD; } .inner{ position: absolute; top: 50%; left: 50%; transform: translate(-100px,-100px); height: 200px; 200px; background: salmon; } */ /* 方法3 */ /* .outer{ position: relative; height: 300px; 300px; border: 1px solid #6A5ACD; } .inner{ position: absolute; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; height: 200px; 200px; background: salmon; } */ /* 方法2 */ /* .outer{ position: relative; height: 300px; 300px; display: flex; align-items: center; justify-content: center; border: 1px solid #6A5ACD; } .inner{ height: 200px; 200px; background: salmon; } */ /* 方法1 */ /*.outer{ position: relative; height: 300px; 300px; border: 1px solid #6A5ACD; } .inner{ height: 200px; 200px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: salmon; } */ </style> </head> <body> <div class="outer"> <div class="inner">inner</div> </div> </body> </html>