我怎样才能使我的文本和第一个 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 改为 %。

我怎样才能使我的文本和第一个 div 垂直对齐？

How can i make my text and first div get vertical aligned?

html

css

text

text-align

alignment