.parent { width: 500px; /* 为了显示方便,与本文知识点无关 */ background-color: teal; /* 为了显示方便,与本文知识点无关 */ height: 300px; } .child { background-color: tomato; color: #fff; line-height: 300px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块级元素垂直居中</title> </head> <body> <div class="parent"> <span class="child"> 我是行内元素,我要垂直居中 </span> </div> </body> </html>