div下的div字符串居中

可以使用 CSS 的 flex 布局来实现 div 下的 div 居中。

HTML 代码：

<div class="container">
  <div class="child">居中文本</div>
</div>

CSS 代码：

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

.child {
  text-align: center;
}

以上代码将会把父 div `.container` 设置为 flex 布局，然后通过 `justify-content: center` 和 `align-items: center` 来水平和垂直居中子元素。子元素 `.child` 的文本居中可以使用 `text-align: center` 实现。

相关问题

img 在div中等比例全部展示

可以使用CSS的background-image和background-size属性来实现在div中等比例展示图片。

具体操作步骤如下：

1. 首先，需要将img标签的src属性设置为空字符串，这样图片就不会在HTML中显示出来。

2. 然后，在CSS中设置div的background-image属性为需要展示的图片的URL。例如：

div {
  background-image: url('path/to/image.jpg');
}

3. 接下来，设置background-size属性为contain，这样图片就会等比例缩放并全部展示在div中：

div {
  background-image: url('path/to/image.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

4. 最后，为了让图片居中展示，还需要设置background-position属性为center，同时设置background-repeat属性为no-repeat，防止图片重复显示。

这样，就可以实现在div中等比例展示图片了。

echarts tooltip 内设置div结构，添加背景后，文字偏离，

ECharts是一款非常流行的JavaScript图表库，它提供了丰富的图表选项和自定义功能。在ECharts的tooltip（提示框）中设置div结构并添加背景时，有时可能会遇到内容偏移的问题。这是因为默认的布局处理并未考虑到复杂的自定义元素。

要解决这个问题，你可以尝试以下几个步骤：

1. **HTML结构**：
在`formatter`回调函数中返回一个自定义的HTML结构，比如一个包含div的字符串。例如：

   tooltip formatter: function (params) {
       return '<div style="background-color: #your-color; padding: some-padding;">' +
               '这里是你的文本<div>';
   }

2. **CSS调整**：
将CSS样式添加到内部的div上，包括text-align、line-height等属性来控制文字位置。例如，如果文本左对齐并且需要居中，可以添加 `text-align: center; vertical-align: middle;`。

3. **宽度计算**：
如果由于div背景或者其他原因导致tooltip宽度变化，可能导致文字位置偏移。记得计算好width并保持动态适应，可以使用`Math.max`或`min-width`来设置容器宽度。

4. **事件监听**：
可能需要处理鼠标移动事件，确保当用户交互时tooltip的内容始终保持正确的位置。

chart.on('mousemove', function () {
   // 更新tooltip的位置和样式
});