实现多行文本垂直居中

方法一:

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>

发布了16 篇原创文章 · 获赞 39 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/weixin_39357177/article/details/82156401