मैं विंडो ब्राउज़र आकार से स्वतंत्र पृष्ठ के केंद्र (क्षैतिज और लंबवत) में हमेशा रहने के लिए बॉक्स बनाने की कोशिश कर रहा हूं। बॉक्स के अंदर का टेक्स्ट उस बॉक्स के केंद्र में भी होना चाहिए जिसमें वह है।

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>
0
MestreALMO 26 फरवरी 2020, 16:48
कृपया एक प्रश्न जोड़ें? हमें आपकी कहाँ मदद करनी चाहिए?
 – 
MAESTRO_DE
26 फरवरी 2020, 16:51
कोशिश `प्रदर्शन: फ्लेक्स; संरेखित-आइटम: केंद्र; औचित्य-सामग्री: केंद्र; `माता-पिता पर
 – 
Shmulik
26 फरवरी 2020, 16:52
मैं बॉक्स को लंबवत रूप से संरेखित करना चाहता हूं, इसलिए जब मैं एक पूर्ण पृष्ठ में खोलता हूं तो यह केंद्र पर होता है, और यदि मैं विंडो का आकार बदलता हूं तो यह अभी भी लंबवत और क्षैतिज मध्य में है
 – 
MestreALMO
26 फरवरी 2020, 17:39

1 उत्तर

सबसे बढ़िया उत्तर

प्रत्येक div के लिए flexbox का उपयोग करना और केंद्र में क्षैतिज और लंबवत रूप से संरेखित करना।

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>
2
Gerard 26 फरवरी 2020, 16:54
पाठ संरेखित है, लेकिन जब मैं इसे पूर्ण पृष्ठ में खोलता हूं तो बॉक्स पृष्ठ के शीर्ष पर रहते हैं, केंद्र में नहीं, मैं इसे केंद्र पर भी लंबवत बनाने की कोशिश कर रहा हूं
 – 
MestreALMO
26 फरवरी 2020, 16:59