方法一:
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>
方法二:在父元素中使用flex布局
display:flex;
justify-content:center;
align-items:center;
<style>
.box{
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #333;
}
</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>