Центр двух divs по горизонтали и по вертикали (CSS)

Question

Это, вероятно, не слишком сложно, но по какой-то причине - я пробовал пару различных решений - у меня есть некоторые проблемы с этим. У меня есть два разных элемента div, заголовок и текстовое поле, которые я хочу центрировать как по горизонтали, так и по вертикали в середине закрывающего элемента div. Заголовок должен быть над текстовым полем.

Вложенный элемент div имеет фиксированные пропорции, но заголовок изменяется по длине и может занимать только одну строку или более одной строки.

Как я могу это достичь?

HTML-:

<div id="square"> 
    <div id="header"> 
     <h3>header</h3> 
    </div> 
    <div id="textfield"> 
     <input id="textfield" type="text"> 
    </div> 
</div> 

В CSS, я пробовал различные комбинации выравнивания текста: центр, вертикальные выравнивания: средний, левый/правый/верх/низ: 0 + маржа: авто, и т.д. , но до сих пор я мог только центрировать дивизии горизонтально.

В некоторых моих решениях я даже попробовал иметь четвертый элемент div между внешним и внутренним.

Answer 1

Это работает?

#square { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    border: 1px solid #ccc; 
 
}

<div id="square"> 
 
    <div id="header"> 
 
    <h3>header</h3> 
 
    </div> 
 
    <div id="textfield"> 
 
    <input id="textfield" type="text"> 
 
    </div> 
 
</div>

Answer 2

Вы можете сделать это с помощью display:flex:

#square { 
 
    display: flex; 
 
    align-items: center; /*horizontal centering*/ 
 
    justify-content: center; /*vertical centering*/ 
 
    flex-direction: column; /*keep the h3 above the textbox*/ 
 

 
    /* these are for demo only*/ 
 
    width: 400px; 
 
    height: 400px; 
 
    border:1px solid red; 
 
} 
 

 
h3 { 
 
    margin-top:0; /* removing margin otherwise you'll get someone commenting the h3 isn't vertically centered*/ 
 
    
 
}

<div id="square"> 
 
    <div id="header"> 
 
     <h3>header</h3> 
 
    </div> 
 
    <div id="textfield"> 
 
     <input id="textfield" type="text"> 
 
    </div> 
 
</div>