我如何使我的文字和第一个div垂直对齐？

Question

因此，我正在执行此代码来进行训练，但是我找不到一种将文本与div框对齐的方法。同样，我也在尝试使包含其他所有内容的div与页面垂直对齐的代码。

body{
  background-color: black;
}

.box{
  border-style: solid;
  width: 240px;
  height: 240px;
  margin: auto;
}

.boxInside{
  border-style: solid;
  width: 90%;
  height: 90%;
  margin: auto;
  padding: 0px;

/*   align a div vertically within its parent element */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

p{
  text-align: center;
}

<div class="box" style="background-color: white;">  
  <div class="boxInside" style="background-color: gray;">
    <div class="boxInside" style="background-color: white;">
      <div class="boxInside" style="background-color: gray;">
        <div class="boxInside" style="background-color: white;">
          <div class="boxInside" style="background-color: gray;">
            <div class="boxInside" style="background-color: white;">
              <div class="boxInside" style="background-color: gray;">
                <div class="boxInside" style="background-color: white;">
                  <div class="boxInside" style="background-color: gray;">
                    <div style="">
                      <p>Testing Display</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

始终使用css flex或grid属性。

body{
  background-color: black;
}
/* I used flex property */
.box{
  border-style: solid;
  width: 240px;
  height: 240px;
  margin: auto;
  display: flex;
  justify-content:center;
  align-items:center;
}

.boxInside{
  background-color:blue;
  padding:9px;
}
.boxInside > p{
  text-align:center;
}

<div class="box" style="background-color: white;">  
  <div class="boxInside" style="background-color: gray;">
    <div class="boxInside" style="background-color: white;">
      <div class="boxInside" style="background-color: gray;">
        <div class="boxInside" style="background-color: white;">
          <div class="boxInside" style="background-color: gray;">
            <div class="boxInside" style="background-color: white;">
              <div class="boxInside" style="background-color: gray;">
                <div class="boxInside" style="background-color: white;">
                  <div class="boxInside" style="background-color: gray;">
                  <!--small change here -->
                  <!--common class added here-->
                    <div class="boxInside">
                      <p>Testing Display</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

注意：如果要深层错觉，请将填充从px更改为%。