美丽的小花园有许多榕树，一簇簇树叶伸到路面上，树叶真绿的可爱。榕树正在茂盛的时期，好象把它全部生命力都展示给我们看。那么多的树叶，一簇堆在另一簇上面，不留一点缝隙，我仿佛也成了一片树叶。那翠绿的颜色明亮地照耀着我的眼睛，似乎每片叶子上都颤动着一个新的生命。这美丽的北国树啊。
在css+div的布局中，有时候需要内容在div中的位置进行垂直居中。下面提供了几种方法可供参考！
css内容垂直居中的方法
1、设置CSS行高属性使用内容垂直居中
设置 css line-height 属性的值与DIV元素的height的值相同，可以使DIV内的内容垂直居中！
HTML代码：
<!DOCTYPE html>
<html>
<head>
<style>
div{
height: 40px;
line-height: 40px;
width:400px;
border:1px solid #ddd;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>代码演示结果：
2、使用内边距来设置内容垂直居中
使用 css 中的 padding 属性，来设置内容在DIV元素中垂直居中
HTML代码：
<!DOCTYPE html>
<html>
<head>
<style>
div{
padding: 20px;
width:400px;
border:1px solid #ddd;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>代码演示结果：
3、使用 flex 布局来设置内容的垂直居中
html代码：
<!DOCTYPE html>
<html>
<head>
<style>
div{
display: flex;
/*实现垂直居中*/
align-items: center;
width:200px;
height:200px;
margin:0 auto;
background-color:green;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>代码演示结果：
4、使用模仿表格布局的方法
html代码：
<!DOCTYPE html>
<html>
<head>
<style>
#wrapper {display:table;width:200px;height:200px;background:#000;margin:0 auto;color:red;}
#cell{display:table-cell; vertical-align:middle;}
</style>
</head>
<body>
<div id="wrapper">
<div id="cell">
<p>，这是垂直居中的！</p>
</div>
</div>
</body>
</html>代码演示结果：
本文css中几种内容垂直居中的方法到此结束。只有启程，才会到达理想和目的地，只有拼搏，才会获得辉煌的成功，只有播种，才会有收获。只有追求，才会品味堂堂正正的人。谢谢大家支持！
![]("./search_ico.png)