如何将文本放在内部div的中心？

Question

我想得到的是以下图片。

有两个div。内部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

试试这个，希望会有用。

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

}

Answer 2

这很简单，只需将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 3

您可以使用弹性框。 Here's my fiddle

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

尝试这样的事情： 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 5

你可以尝试这个：

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