此问题已在此处有答案：

How can I center text (horizontally and vertically) inside a div block?（27回答）
20小时前关闭。
我正在做一个文本编辑器，我有一个工作计数器。我想在弹出框中居中显示单词计数器，但它没有居中显示。代码如下：

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
body {
    font-family: Montserrat, sans-serif;
}
h1{
  -webkit-user-select: none; 
  -ms-user-select: none; 
  user-select: none;
  text-align : center;
}
article {
  text-align : justify;
    overflow:auto;
    line-height: 1.5;
  height : 70vh;
  margin : auto;
  font-family: Montserrat, sans-serif;
outline : none;
  width : 85%;
}
.outer {
    display : flex;
}
.pops {
  padding : 0px 15px;
}
.pop span {
  text-align:center;
  font-size : 20px;
  color : #444;
text-align: center;
}

.pop{
  transition: .5s;
  width: 120px;
  height : 70px;
  border-radius: 5px;
  border: 1px solid #BFBFBF;
  background-color: white;
  
}
.pop:hover {
  background-color : #eae8ff;
}

联系我们

<h1> StreamLine </h1>
<div class = "outer"> 
<article class = "child" id = "text" data-gramm="false"
data-gramm_editor="false"
data-enable-grammarly="false" contenteditable = "true" spellcheck = "true"> Write your amazing words here! </article>
  <div class = "pops" > <div class = "pop"> <span class = "inner" id="words">0</span></div></div>
</div>

我想把文本放在

.pop span

但它没有相反，它停留在边缘。有人知道为什么会这样吗？如果是，请答复。