div中 数字不居中

要使数字居中，可以通过设置line-height属性来实现：

div {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  text-align: center;
  line-height: 50px; /* 设置行高等于元素高度 */
}

这样，数字就会在 div 元素中居中显示。请注意，这里的 line-height 值应该等于 div 元素的高度，这样才能使数字垂直居中。如果数字过多，可能需要调整元素的高度和宽度，以便数字能够适应其中并且居中显示。

相关问题

css数字和汉字水平居中

要实现数字和汉字水平居中，可以使用以下 CSS 属性和值：

1. 对父元素应用 `display: flex;` 属性，将其设置为弹性容器。
2. 使用 `justify-content: center;` 属性将子元素水平居中。

示例代码如下：

HTML：

<div class="container">
  <span>123</span>
  <span>汉字</span>
</div>

CSS：

.container {
  display: flex;
  justify-content: center;
}

上述代码将父元素设置为弹性容器，并将子元素水平居中。这样，数字和汉字都会水平居中显示在父元素中。

那怎么同时使上面的相关性数字及圆圈居中呢

你可以使用CSS中的flexbox布局来实现相关性数字和圆圈的居中显示。具体方法如下：

1. 对相关性数字和圆圈的外层容器设置display:flex属性，将其转换为flex容器。

2. 对flex容器设置justify-content:center属性，使其子元素在水平方向上居中对齐。

3. 对flex容器设置align-items:center属性，使其子元素在垂直方向上居中对齐。

这样，相关性数字和圆圈就可以同时居中显示了。以下是示例代码：

<div class="container">
  <div class="number">3</div>
  <div class="circle"></div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.number {
  font-size: 24px;
  font-weight: bold;
  margin-right: 10px;
}

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ccc;
}