<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子元素在父元素里面垂直居中</title> <link rel="stylesheet" type="text/css" href=""/> <style> #d1{ position: relative; border:thin solid red; width:900px; height:100px; } #d2{/*dashed也是虚线*/ border:thin dotted blue; width:50px; height:50px; float:right; } .center-vertical{ position: relative; top: 50%; transform: translateY(-50%); } </style> </head> <body> <div id="d1"> <div id="d2" class="center-vertical"></div> </div> </body> </html>