我有以下 html/css 代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="display: flex; justify-content: center; align-items: center;">
<div style="background-color: blue">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div style="background-color: red">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div style="background-color: yellow">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</body>
</html>
我希望輸出看起來像附加的影像，其中外部 div（以及它的內部元素）垂直和水平居中，紅色和黃色 div 的高度略高于藍色 div，但是所有 3 個 div 的內容仍然對齊。有人知道該怎么做嗎？
uj5u.com熱心網友回復：
body{
display: flex;
min-height: 100vh;
}
如果將 body 的高度設定為螢屏的 100% 并彎曲，則 3 個專案將對齊/居中
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/438218.html
上一篇：如何在一個div中居中3個div