我上一篇博客文章是关于块级元素、内联元素和内联块级元素水平居中的，而内联元素和内联块级元素垂直居中正要基于水平居中的前提下，如果你还不是很会使用水平居中，可以参考我的上一篇博客文章。同样，垂直居中也要分为块级元素与内联元素、内联块级
块级元素
块级元素的垂直居中要复杂一点，要用到多个属性。首先要用到position属性，而且要牢记子绝父相。再用到left和top属性分别定为50%，这时还需用到margin-left和margin-top属性，分别为要居中元素width和height的一半，看例子
块级元素实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example1</title>
<style>
#top { /*父元素*/
width: 1000px;
height: 500px;
background-color: red;
position: relative; /*父相*/
}
.box {
width: 400px;
height: 200px;
background-color: blue;
position: absolute; /*子绝*/
left:50% ; /*垂直居中*/
top: 50%;
margin-left: -200px;
margin-top: -100px;
}
</style>
</head>
<body>
<div id="top">
<div class="box"></div>
</div>
</body>
</html>
内联元素和内联块级元素
内联元素和内联块级元素相比于块级元素的垂直居中要简单的多。在这里，我仍以span标签作为例子来举例说明，垂直居中就要用到line-height元素，而它具体的值要根据其要居中的父盒子（以下简称父盒子）来定。将line-height的值与其父盒子的height,这句代码的含义是用父盒子的height - 这个元素的height的值上下平分使该元素水平居中。注意这个属性也是可继承的。
内联元素和内联块级元素实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example2</title>
<style>
#top { /*父元素line-height可继承*/
width: 1000px;
height: 500px;
background-color: red;
text-align: center;
line-height: 500px; /*line-height的值与父元素height相同*/
}
</style>
</head>
<body>
<div id="top">
<span>前端html</span>
</div>
</body>
</html>
