方法一:
1. 對父元素設置display:table屬性
2. 對文本設置display:table-cell和vertical-align:middle屬性
<style>
.box{
width: 500px;
height: 500px;
display: table;
border: 1px solid #333;
}
.box p{
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<div class="box">
<p>多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中</p>
</div>
</body>
方法二:
1.對父元素設置的line-height:等於父元素的高度
2.對文本設置display:inline-block;vertical:middle;line-heigh:20px;(覆蓋父元素的line-height)
<style>
.box{
width: 500px;
height: 500px;
border: 1px solid #333;
line-height: 500px;
}
.box p{
display: inline-block;
line-height: 20px;
vertical-align: middle;
}
</style>
<body>
<div class="box">
<p>多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中</p>
</div>
</body>