父元素 高度固定,如何使其中的文字垂直居中?
利用display:table;
加上display:table-cell;
的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.middle-box{
display: table; /*重点*/
height: 300px;
border: 1px solid #000;
}
/*重点:table-cell布局*/
.middle-inner{
display: table-cell;
vertical-align:middle;
text-align:center;
}
</style>
<body>
<div class="middle-box">
<div class="middle-inner">
<p><span class="suc-tip">前端开发博客,专注前端开发和web教程</span><br/><span class="suc-link">快捷入口:<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
<p style=""><span class="suc-tip">5年的老博客,一直致力于WEB开发</span></p>
</div>
</div>
</body>
</html>