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

Question

So i am doing this code to train, but i can't find a way to align my text with my div box. Also the code i'm also trying to make the div that contains everything else also get aligned vertically with the page.

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>

Does this answer your question? [How do I vertically align text in a div?](https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div) — smashed-potatoes, Feb 08 '20 at 02:49
actually i saw that before i posted my question, i've tried some of those ideas, but I couldn't make it work — MestreALMO, Feb 08 '20 at 02:58

Abhishek Kamal · Answer 1 · 2020-02-08T03:36:54.677

Always use css flex OR grid property.

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>

Note : If you want deep-box illusion then turn padding from px to %.

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

1 Answers1