центрирующий контент в пределах централизованного div

Question

У меня есть div внутри div, в котором есть контент (динамический контент). Я получил дочерний div в центре по вертикали, но не могу вертикально центрировать содержимое внутри. Я использую Bootstrap.

.main { 
 
    position: relative; 
 
    min-height: 600px; 
 
    width: 100%; 
 
    margin: 0; padding: 0; 
 
} 
 

 
#content { 
 
    position: absolute; 
 
    display: inline-block; 
 
    text-align: center; 
 
    margin: auto; 
 
    max-width: 60%; 
 
    top: 50%; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    transform: translateY(-50%) 
 
} 
 

 
#content p { 
 
    position: relative; 
 
    font-weight: 500; 
 
    font-size: 3.5em; 
 
    line-height: 1.25em; 
 
    color: #fff; 
 
}

<div class="row"> 
 
    <div class="main"> 
 
    <div id="content"> \t \t \t \t 
 
     <p> text content </p> (this is inputted by Wordpress/post) 
 
    </div> 
 
    </div> \t 
 
</div>

Answer 1

Вы можете использовать Flexbox:

.main { 
 
    min-height: 300px; 
 
    background-color: rgba(0, 0, 0, 0.3); 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
#content { 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    height: 100px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
#content p { 
 
    color: white; 
 
}

<div class="row"> 
 
    <div class="main" style=""> 
 
     <div id="content">    
 
      <p> text content </p> 
 
     </div> 
 
    </div>  
 
</div>

Answer 2

Попробуйте добавить что-то в стиле, как это, самозагрузки не имеют такой функциональности, его до пользователю выполнять работу.

.center { 
    margin: auto; 
    height: 65%; 
} 

Надежда эта помощь

Answer 3

Лучшее решение всегда будет использовать Flexbox, который выходит из коробки в CSS3 ,

Просто используйте следующий класс:

#content p { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
    font-weight: 500; 
    font-size: 3.5em; 
    line-height: 1.25em; 
    color: #000; 
} 

В качестве альтернативы,

Вы можете поставить мин-высота класса "основного" на 150% вместо 600px.

.main { 
     position: relative; 
     min-height: 150%; 
     width: 100%; 
     margin: 0; padding: 0; 
    } 

Это было бы самым простым решением.