如何让我的文本和第一个 div 垂直对齐？答案

【问题标题】：How can i make my text and first div get vertical aligned?如何让我的文本和第一个 div 垂直对齐？
【发布时间】：2020-02-08 11:36:54
【问题描述】：

所以我正在编写这段代码来训练，但我找不到将我的文本与我的 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>

【问题讨论】：

这能回答你的问题吗？ How do I vertically align text in a div?
实际上我看到在我发布我的问题之前，我已经尝试了其中的一些想法，但我无法让它发挥作用

标签： html css text alignment text-align

【解决方案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 转到 %。

【讨论】：