今天实验了一下使用vertical-align来进行文字垂直方向的居中,先对目标内容进行设置display:table-cell.单行文本和多行文本都可以。2。以前单行文本可以直接使用: line-height=盒子高度。来达到垂直方向的居中。具体简单代码如下。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实验一下垂直居中</title>
<style>
.box{width:800px;
height:400px;
background:red;
border:2px solid blue;
text-align:center;
display:table-cell;
vertical-align:middle;}
.box1{width:800px;
height:400px;
background:blue;
border:2px solid yellow;
text-align:center;
display:table-cell;
vertical-align:middle;}
</style>
</head>
<body>
<div class="box" >
今天的天气不错哦
</div>
<div class="box1">
<p>p里面的内容哦</p>
</div>
</body>
</html>