Центр div внутри другой

Question

У меня возникли проблемы с центрированием содержимого одного div внутри другого, потому что содержимое не отображается.

#searchbkg { 
 
    postition: relative; 
 
    width: 100%; 
 
    height: 700px; 
 
    background-color: #85e085; 
 
} 
 
#searchcentre { 
 
    position: absolute; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
}

<div id="searchbkg"> 
 
    <div id="searchcentre">Test</div> 
 
</div>

появляется зеленая рамка, но нет текста внутри него.

Answer 1

Ваш текст выглядит нормально, но он не будет центрирован, потому что у вас есть position: absolute; с внутренней стороны. Измените его на position: relative;, и он будет располагаться горизонтально. Если вам нужен текст для центрирования в div, вы также можете применить text-align: center;.

#searchbkg { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 700px; 
 
    background-color: #85e085; 
 
} 
 
#searchcentre { 
 
    position: relative; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    border: 1px solid red; 
 
}

<div id="searchbkg"> 
 
    <div id="searchcentre">This is a centered div!</div> 
 
</div>

Answer 2

Вам нужно сделать следующие 3 изменения, чтобы сделать ваше содержание в центре;

1. У вас есть опечатка в одном стиле css внутри стилей #searchbkg. Существует postition, тогда как это должно быть position.
2. Удалить position: absolute от #searchcentre если не нужно (Абсолютное позиционирование должно использоваться только в том случае, если вы хотите разместить один элемент над другим).
3. Добавить text-align: center в #searchcentre.

#searchbkg{ 
 
    position: relative; 
 
    width: 100%; 
 
    height: 700px; 
 
    background-color: #85e085; 
 
} 
 

 
#searchcentre{ 
 
    text-align: center; 
 
    background: orange; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
}

<div id="searchbkg"> 
 
    <div id="searchcentre">Test</div> 
 
</div>

Answer 3

попробовать это:

#searchbkg{ 
 
    postition: relative; 
 
    width: 100%; 
 
    height: 700px; 
 
    background-color: #85e085; 
 
    text-align:center; 
 
} 
 

 
#searchcentre{ 
 
    display: inline-block; 
 
    width: 50%; 
 
}

<div id="searchbkg"> 
 
    <div id="searchcentre">Test</div> 
 
    </div>