为什么flexbox中的文本未垂直放置？ [重复]

Question

此问题已经在这里有了答案：

Flexbox: center horizontally and vertically（12个答案）

In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?（4个答案）

关闭2分钟前。

为什么DEX Songwriting Expo BLEND 2020没有垂直居中？

HTML / React

<Box className={classes.containerEventTimeLowerRightPart}>
  <div className={classes.eventNameContainer}>
    <h3 className={classes.eventNameLocationText}>
      DEX Songwriting Expo BLEND 2020
    </h3>
  </div>
  <div className={classes.locationContainer}>
    <h3 className={classes.eventNameLocationText}>
      Budapest Park
    </h3>
  </div>
</Box>

CSS

containerEventTimeLowerRightPart: {
  width: "77%",
  letterSpacing: "0.16em",
  display: "flex",
  flexDirection: "column"
},
eventNameContainer: {
  borderBottom: "5px solid black",
  flexBasis: "66%",
  textAlign: "center",
  justifyContent: "center"
},
locationContainer: {
  flexBasis: "33%",
  color: "black",
  textTransform: "uppercase",
  textAlign: "center",
  justifyContent: "center"
},
eventNameLocationText: {}

Answer 1

这是因为对齐内容默认情况下将子级水平对齐。有两种方法可以使副本垂直居中]

第一种方式