这种情况下，子元素多行文字如何垂直居中？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 100px;
      height: 300px;
      border: 1px solid red;
      word-wrap: break-word;
    }
    .box {
      display: flex;
      align-items: center;
      height: 500px;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box1">1234aaaaaaaaaaaaaaaaaaaaa</div>
  </div>
</body>
</html>

阅读 1.4k

.box1 { width: 100px; height: 300px; border: 1px solid red; word-wrap: break-word; display: flex; justify-content: center; align-items: center; text-align: center; /* 使文字水平居中，可选 */ }

在这种情况下，要让子元素多行文字垂直居中，可以结合使用 flex 布局和一些辅助的 CSS 属性。以下是修改后的代码示例，使 box1 中的多行文字在 box 中垂直居中显示：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 100px;
      height: auto; /* 让高度根据内容自适应 */
      border: 1px solid red;
      word-wrap: break-word;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .box {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 500px;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box1">1234aaaaaaaaaaaaaaaaaaaaa</div>
  </div>
</body>
</html>

box 类:

display: flex; 和 align-items: center; 使其子元素在垂直方向居中。
justify-content: center; 使其子元素在水平方向居中（可选，根据需要）。

box1 类:

display: flex; 使 box1 内部的内容也使用弹性布局。
align-items: center; 使内部内容在垂直方向居中。
justify-content: center; 使内部内容在水平方向居中。
text-align: center; 使文本在多行时居中对齐（可选，根据需要）。
通过上述设置，box1 内的多行文字将会在父容器 box 中垂直居中，并且在 box1 内部也会居中对齐。这样可以确保多行文本在视觉上居中显示。

这种情况下，子元素多行文字如何垂直居中？

你尚未登录，登录后可以

如何自定义设置虚线边框的样式？

怎么把一个矩形div变成一个直角三角形？

怎么去掉聚焦文字处的光标竖线？

Web 上的室内导航效果是如何实现的呢？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

浏览器可以直接解析scss文件了吗？

Flask中static文件夹下的本地图片无法在HTML页面加载怎么办？