CSS: как вложить три блока "матрёшкой" и центрировать контент в них?

То есть, получить вот такое:

На вложенных табличных тегах сделать такое элементарно, а вот на разделах div кодик как-то уродлив вышел, и в старых браузерах ничего позиционироваться не будет, мне кажется, но как сделать лучше? :)

В принципе, это же общая схема элемента HTML получилась. В Firefox, IE11 и "Хромом" из Андроида 7 дома сработало. Ниже - разметка:

<style>
 .outer {
  background-color: #666;
  margin: auto;
  width: 300px;
  height: 300px;
  position: relative;
 }
 .inner {
  height: 260px;
  width: 260px;
  margin: auto;
  background-color: #999;
  border: 2px solid blue;
  text-align: center;
  vertical-align: middle;
 }
 .insider {
  width: 180px;
  height: 180px;
  background-color: #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }
 .rightText {
  text-align: right;
  transform: translate(0, 210px);
 }
 .middleText {
  font-size: 80%;
  line-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }
</style>
<div class="outer">
 &nbsp; &larr; margin &rarr;
 <div class="inner">
   border &uarr;
   <div class="insider">
    <div class="middleText">Для горизонтального центрирования всё просто. 
     Вертикальное же изначально не было предусмотрено в спецификации CSS и 
     по сей день вызывает ряд проблем.
    </div>
   </div>
   <div class="rightText">&larr; padding &nbsp;</div>
 </div>
</div>

 Ссылка по теме: Центрирование горизонтальное и вертикальное

Ну и вот такой "загадочный" подход тоже работает для вложения блоков "матрёшкой":

<style>
div.mydiv {
 width:90%;
 height:90%;
 margin:0 auto;
}
#wrap{
 width: 500px;
 height: 500px;
 position: relative;
}
.z {
 position: absolute;
 top:5%;
 left:5%;
}
#a{background-color:#ccc;}
#b{background-color:#999;}
#c{background-color:#666;}
#d{background-color:#333;}
</style>
<div class="mydiv" id="wrap"> 
    <div id="a" class="mydiv z">margin
	 <div id="b" class="mydiv z">border
	  <div id="c" class="mydiv z">padding
	   <div id="d" class="mydiv z">content
	   </div>
	  </div>
	 </div>
    </div>
</div>

Попробуйте изменить отступы в 5% на другие. Как не работает? :) Всё дело в том, что width у div.mydiv + 2 * left (есть же ещё и right) у .z должно в сумме составлять 100%, как и div.mydiv (height) + 2 * .z (top). Тогда работает. Ну и position: relative у обёртки #wrap, а у вложенных блоков .z - абсолютная.

Ну и вот так, в принципе, ещё логичней, с отдельными сущностями (классами) для всех блоков, смещения и размеров каждого.

Многоуровневое вложение блоков по центру

<p><b>Многоуровневое вложение блоков по центру</b></p>
<style>
.mybar {
 margin: 0 auto;
}
.myshift {
 top: 20px;
 left: 20px;
 position: absolute;
}
.b1 {
 width: 200px;
 height: 200px;
 position: relative;
 background-color: #ccc; 
}
.b2 { 
 width: 160px;
 height: 160px;
 background-color: #999; 
}
.b3 { 
 width: 120px;
 height: 120px;
 background-color: #666; 
}
.b4 { 
 width: 80px;
 height: 80px;
 background-color: #333; 
}
</style>
<div class="mybar b1">margin
 <div class="mybar myshift b2">border
  <div class="mybar myshift b3">padding
   <div class="mybar myshift b4">content
   </div>
  </div>
 </div>
</div>

03.11.2019, 12:40 [1767 просмотров]