Как разместить текст в центре внутреннего div?

Question

Что я хочу получить, это следующее изображение.

Есть два дивы. Внутренний div находится в центре внешнего div, а текст box1 находится в центре внутреннего div.

Код css не может достичь цели.

div.father { 
    align-items: center; 
    border: 1px solid black; 
    display: flex; 
    height: 300px; 
    justify-content: center; 
    left: 50%; 
    position: absolute; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    width: 300px; 
} 

div.son { 
    border: 1px solid black; 
    height: 100px; 
    width: 100px; 
} 

<div class="father"> 
    <div class="son">box1</div> 
</div> 

Как поставить box1 в центре div.son?

Answer 1

Вы можете использовать гибкую форму. Here's my fiddle.

div.father { 
 
    border: 1px solid black; 
 
    align-items: center; 
 
    justify-content: center; 
 
    display: flex; 
 
    height: 300px; 
 
    width: 300px; 
 
    left: 50%; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    /**/ 
 
    margin-top: 100px;/*only for snippet spacing*/ 
 
} 
 
div.son { 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    width: 100px; 
 
    align-items: center; 
 
    justify-content: center; 
 
    display: flex; 
 
}

<div class="father"> 
 
    <div class="son">box1</div> 
 
</div>

Answer 2

попробовать что-то вроде этого: https://jsfiddle.net/j1e9qoao/

div.father { 
    display: flex; 

    align-items: center; 
    border: 1px solid black; 
    height: 300px; 
    justify-content: center; 
    left: 50%; 
    position: absolute; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    width: 300px; 
} 

div.son { 
vertical-align: middle; 
display: table-cell; 
border: 1px solid black; 
    height: 100px; 
    width: 100px; 
} 

Answer 3

Попробуйте это, надеюсь, будет работать.

div.son { 
border: 1px solid black; 
height: 100px; 
width: 100px; 
text-align: center; 
vertical-align: middle; 
line-height: 100px; 

}

Answer 4

Это просто, просто добавить text-align: center к любому из элементов для горизонтального выравнивания.

E.g.

div.son { 
    ... 
    text-align:center; /* horizontal align */ 
} 

Как для вертикального выравнивания, если это одно слово, вы можете использовать высоту строки так:

div.son { 
    border: 1px solid black; 
    height: 100px; 
    width: 100px; 
    text-align:center; /* horizontal align */ 
    line-height:100px; /* vertical align */ 
} 

Answer 5

Вы можете попробовать это:

div.son { 
    border: 1px solid black; 
    padding: 50px; 
}