在 CSS 中定位：居中对齐 child DIV 中的文本，该文本已经在 parent DIV 中水平和垂直对齐

Question

我有一个内在 (child) div 在 outer (parent) div.

内部 div 在外部 div 内水平和垂直居中对齐。使用 table-cell & vertical-align: middle on parent element and display: inline-block 在 child 元素中。

I want to center align the text inside the inner div both horizontally as well as vertically.

这个问题看似重复，其实不然。其他链接上提供的解决方案通常基于-

line-height：我觉得这不是一个好的解决方案，因为它取决于 parent 的高度。
显示：table-cell: 内部元素在我的解决方案中已经是 inline-block，不能在同一块上保留另一个 display 属性。
Flex: 是我不知道的东西，因此接受了@xenio-gracias.

如何实现？

这是我当前的工作代码：

/* Lesson 3 (PART 1): div inside div */
.outer-lesson3 {
 border: 1px solid lightcoral;
 display: table-cell;
 width: 300px;
 height: 300px;
 vertical-align: middle;
 text-align: center;
}

.inner-lesson3 {
 border: 1px solid mediumseagreen;
 display: inline-block;
 width: 100px;
 height: 150px; 
}
/* Lesson 3 (PART 1) ENDS */

<html>

<head>
    <link rel="stylesheet" href="prac.css">
</head>

<body>
    <!-- Lesson 3 -->
    <div class="outer-lesson3">
        <div class="inner-lesson3">
            Horizontally & Vertically Center 'div' inside 'div'
        </div>
    </div>
</body>

</html>

Answer 1

使用 flexbox 来实现希望这对您有所帮助。谢谢

/* Lesson 3 (PART 1): div inside div */

.outer-lesson3 {
  border: 1px solid lightcoral;
  display: table-cell;
  width: 300px;
  height: 300px;
  vertical-align: middle;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner-lesson3 {
  border: 1px solid mediumseagreen;
  display: inline-block;
  width: 100px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Lesson 3 (PART 1) ENDS */

<html>

<head>
  <link rel="stylesheet" href="prac.css">
</head>

<body>
  <!-- Lesson 3 -->
  <div class="outer-lesson3">
    <div class="inner-lesson3">
      Horizontally & Vertically Center 'div' inside 'div'
    </div>
  </div>
</body>

</html>

在 CSS 中定位：居中对齐 child DIV 中的文本，该文本已经在 parent DIV 中水平和垂直对齐

Positioning in CSS: Center align a text inside child DIV which is already horizontally & vertically aligned inside parent DIV

html

css

position

center

vertical-alignment