Question

我想将值放在Vue组件的正方形中。裸代码在普通网页中运行良好：

#element {
  color: yellow;
  font-size: 60pt;
  font-weight: bolder;
  font-family: "Open Sans", sans-serif;
  background-color: black;
  color: white;
  width: 250px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#box {
  text-align: center;
}

<div id="element">
  <div id="box">
    18
  </div>
</div>

将相同的代码放入Vue组件（<temperature-outside>，如下所述）

<template>
<div id="element">
  <div id="box">
     18
  </div>
</div>
</template>

<script>
// 
</script>

<style>
#element {
  color: yellow;
  font-size: 60pt;
  font-weight: bolder;
  font-family: "Open Sans", sans-serif;
        background-color: black;
        color: white;
  width: 250px;
  height: 250px;
  display: flex;
  align-items: center;
    justify-content: center;

}
#box {
  text-align: center; 
}
</style>

本身只是放在一个纯HTML页面中（没有额外的样式）

<body>
    <div id="app">
        <temperature-outside></temperature-outside>
    </div>
</body>

显示为

它向右和底部偏移。

在DevTools中查看元素时，我发现文本本身不在框中居中：

Codepen中的相同代码正确居中：

造成这种差异的原因是什么？

在Vue组件中居中是偏移的，但在普通页面中是正常的

0 个答案: