Centralize div box to the middle and the inside text, independent of screen size

Question

I'm trying to make the box to always stay in the center (horizontally and vertically) of the page independent of window browser size. The text that's inside the box should be also in the center of the box it is in.

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

Using flexbox for each div and aligning in the center horizontally and vertically.

body {
  background-color: black;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.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>