css-多行垂直居中

最新推荐文章于 2023-05-30 20:44:57 发布

YOLOD_O

最新推荐文章于 2023-05-30 20:44:57 发布

阅读量123

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/weixin_42193850/article/details/114686295

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			
			/* 方式一 */
			#div1{
				width: 400px;
				height: 400px;
				background-color: gold;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			#div2{
				width: 80%;
			}
			
			/* 方式二 */
			.style1{
				height: 400px;
				background-color: gray;
				display: flex;  		/*弹性布局*/
				justify-content: center;	/*垂直居中*/
				align-items: center;		/*水平居中*/
				word-wrap: break-word; /*数字换行*/
				word-break: break-all; /*数字换行*/
			}
	
			
		</style>
		
	</head>
	<body>
		
		<div id="div1">
			<div id="div2">
				永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。
				群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，
				映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，
				亦足以畅叙幽情。是日也，天朗气清，惠风和畅。仰观宇宙之大，
				俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。后之视今，
				亦犹今之视昔，悲夫！故列叙时人，录其所述，虽世殊事异，所以兴怀，
				其致一也。后之览者，亦将有感于斯文。
			</div>		
		</div>

		
		<hr />

		<div class="style1">
			<div style="width: 80%;">
				永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。
				群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，
				映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，
				亦足以畅叙幽情。是日也，天朗气清，惠风和畅。仰观宇宙之大，
				俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。后之视今，
				亦犹今之视昔，悲夫！故列叙时人，录其所述，虽世殊事异，所以兴怀，
				其致一也。后之览者，亦将有感于斯文。
			</div>	

		</div>

	</body>
</html>

YOLOD_O

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-多行垂直居中

效果图：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> /* 方式一 */ #div1{ width: 400px; height: 400px; background-color: gold; display: flex; .
复制链接

扫一扫

专栏目录