效果图:
代码:
<!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>