欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css实现多行文本在容器内垂直居中

程序员文章站 2022-04-30 12:10:21
...

提供两种方法line-height和flex布局方法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文字固定容器居中</title>
		<style type="text/css">
			.box1 {
				background-color: #ccc;
				width: 300px;
				height: 800px;
				margin: 100px auto;
				line-height: 800px;
			}
			
			.box1 span {
				display: inline-block;
				line-height: 20px;
				vertical-align: middle;
			}
			
			.box {
				display: flex;
				width: 500px;
				height: 800px;
				margin: 50px auto;
				border: 2px solid #000;
				align-items: center;
				/*垂直轴居中*/
			}
			
			.box span {
				/*span是另一个flex布局容器，它本身将自适应填满除p元素外的宽度*/
				flex: 1;
				display: flex;
				justify-content: center;
				/*水平轴居中*/
			}
		</style>
	</head>

	<body>
		<!--line-height-->
		<div class="box1">
			<span>多行居中测试多行居中测试多行居中
	         	测试多行居中测试多行居中测试多行居中测试多行居中测
	         	试多行居中测试多行居中测试多行居中测试多行居中测试多行居中
	        </span>
		</div>
		<!--flex布局-->
		<div class="box">
			<span>span多行居中测试span多行居中测试span多行居中测试span多行居中测试span多行居中测试span多行居中测试span多行居中测试span多行居中测试span多行居中测试span多行居中测试span多行居中测试span多行居中测试</span>
		</div>

	</body>

</html>

相关标签： 垂直居中 css 文字居中

上一篇： 是谁十一岁就敢斥责武则天？裴伷先最后的结局怎么样？

下一篇： 如果董卓没有死，三国历史会怎样发展呢？

推荐阅读